I am using the TipTip JavaScript plugin to display tooltips on form inputs, including multi-select elements. The tooltips work fine on other input elements but are not showing up on the multi-select input. Below is the relevant code snippet I am using:
$(function () {
// Tooltip
$(".form_tiptip").tipTip({
maxWidth: "auto",
defaultPosition: "bottom",
delay: 0,
activation: "focus"
});
});
<tr class="input-row">
<td class="input-label"><?php echo __(T_FACILITY_NAME); ?></td>
<td class="input-required"><span class="require-label"><?php echo __("*"); ?></span></td>
<td class="input-form">
<?php echo $this->Form->input(
'store_id',
[
'id' => 'store-select',
'type' => 'select',
'empty' => '-',
'options' => array_map(fn($x) => ['value' => $x['id'], 'text' => $x['store_name']], $shoppingStores),
'default' => isset($selectedStore) ? $selectedStore['store_id'] : null,
'disabled' => isset($selectedStore),
'label' => false,
'title' => CHK_STORE_NAME,
'class' => 'input-xlarge chkselect form_tiptip multi-select'
]
); ?>
</td>
What I Have Tried:
- Verified that the .form_tiptip class is applied to the multi-select
element. - Checked that the title attribute is present on the multi-select
element. - Confirmed that the TipTip plugin works for other input types in the
same form.
Issue: - Despite the above efforts, the tooltip does not appear when focusing
on the multi-select element. The same setup works fine with text
inputs and other elements.
Question:
- How can I make TipTip work with multi-select elements? Is there any
workaround or additional configuration required for TipTip to support
multi-select elements?