Создайте всплывающую подсказку для выпадающего меню начальной загрузки

Question

Я пытаюсь добавить всплывающую подсказку в выпадающее меню с несколькими выборками, созданное с помощью плагина Bootstrap-select jQuery...

Так я определил свой выбор в HTML...

<select id="dropDownList" 
        class="selectpicker" 
        title="Show Level" 
        multiple data-actions-box="true">
</select>

Этот раскрывающийся список заполняется во время выполнения файлом JSON, а заголовок раскрывающегося списка - это заголовок, который я установил в HTML "Показать уровень".

Как я могу добавить всплывающую подсказку?

Answer 1

Bootstrap имеет удобную подсказку JavaScript, встроенную прямо в.

Настройте разметку:

<select id="dropDownList" 
        class="selectpicker" 
        title="Show Level" 
        multiple data-actions-box="true"
        data-placement="top" data-toggle="tooltip">
                   <option>Hello!</option>
                   <option>Hello Again</option>
</select>

-

data-placement может быть "сверху", "справа", "слева" или "снизу"

Затем в javascript выберите элемент и вызовите функцию всплывающей подсказки, например:

$('#dropDownList').tooltip().attr('data-original-title', 'Here We Are!');

Здесь вам нужно установить, какой текст во всплывающей подсказке. Обычно вы устанавливаете его в фактической разметке с помощью title атрибут или data-original-title атрибут однако - если title атрибут существует в разметке, он будет игнорировать data-original-title, Установив его в javascript, я нашел удобный обходной путь (поскольку для чего-то другого вам нужен атрибут title).

Вот бутлуп, чтобы увидеть его в действии:

Bootply - ПРИМЕЧАНИЕ: пожалуйста, игнорируйте CSS. Я только положил его туда, чтобы переместить окно параметров за край экрана.

РЕДАКТИРОВАТЬ 2

Я изменил его, чтобы использовать идентификатор. Это лучший способ приблизиться к нему, чтобы вы могли контролировать, какая подсказка отображается на каком элементе. В противном случае все подсказки будут одинаковыми. Вот обновленный Bootply