Всплывающее окно Boostertrap на примере тега select option не работает

У меня есть требование, что я должен показать каждый заголовок опции при наведении курсора. Всплывающее окно начальной загрузки работает для других текстовых полей в той же форме, но не работает для раскрывающегося списка.

Я попробовал заголовок attibute для каждого параметра, он работает в chrome, но в IE текст при наведении не отображается достаточно долго, поэтому я решил использовать Bootstrap.

код:

<!DOCTYPE html>
<html lang="en">
<head>

  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<body>
<div>
<select id="testList">
<option value="1" title="Header1" data-toggle="popover" data-trigger="hover" style="color:red;">Item 1</option>
<option value="2" title="Header2" data-toggle="popover" data-trigger="hover"style="color:green;">Item 2</option>
<option value="3" title="Header3" data-toggle="popover" data-trigger="hover"style="">Item 3</option>
<option value="4" title="Header4" data-toggle="popover" data-trigger="hover" style="color:orange;">Item 4</option>
</select>

</div>


<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});


</script>

</body>
</html>

Здесь я не могу использовать атрибут размера в теге select

Может кто-нибудь выяснить причину не работает

или же

Может кто-нибудь дать мне пример кода, чтобы показать, что каждое значение параметра на мыши hover.it может быть либо всплывающей подсказкой, либо всплывающей подсказкой.

Источник

1 ответ

Мы должны немного подправить, чтобы это заработало. Мы не можем напрямую добавить всплывающее окно, чтобы выбрать вариант. Вместо этого мы можем применить выбранный плагин к блоку выбора, он преобразует параметры выбора в неупорядоченный список. Кроме того, мы можем добавить всплывающие над каждым элементом li.

$("#testList").chosen({                    
                    disable_search: true

});

$("testList_chosen.li.active-result").each(function(){
                $(this).attr('data-toggle','popover');
});

$('[data-toggle="popover"]').popover({container: 'body'});

Подробнее о выбранном плагине читайте здесь. http://julesjanssen.github.io/chosen/

Источник
Другие вопросы по тегам