Skip to content

Instantly share code, notes, and snippets.

@mahammad
Last active January 10, 2022 05:47
Show Gist options
  • Save mahammad/dbd26a4b9740194cf7778a4e546df745 to your computer and use it in GitHub Desktop.
Save mahammad/dbd26a4b9740194cf7778a4e546df745 to your computer and use it in GitHub Desktop.
How to add tooltip on each select option with bootstrap-select

Selectpicker html

<select id="customer_ids" name="customer_ids[]" class="selectpicker show-tick " title="Select" required multiple data-actions-box="true" data-live-search="true" data-width="100%" data-container="body" data-style="bg-white border" data-selected-text-format="count">
    <option value="1" selected data-tooltip="long text 1" data-content="<i class='fas fa-info-circle'></i> short text 1..." >icon short text 1... </option>
    <option value="2" selected data-tooltip="long text 2" data-content="<i class='fas fa-info-circle'></i> short text 2..." >icon short text 2... </option>
</select>

init

 $('.selectpicker').selectpicker().on('shown.bs.select', function(e){
    setTimeout(() => {
        var $el = $(this);
        var $list = $el.data('selectpicker').selectpicker.main.data;

        $.each($(this).data('selectpicker').selectpicker.main.data, function(key, value) {
            $op = $el.data('selectpicker').selectpicker.main.elements[key];
            $($op).find('> a > .text > i').tooltip({
                'title': value.option.dataset.tooltip,
                'placement': 'left'
            });
        });
    }, 100);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment