2

Я пытаюсь добавить всплывающую подсказку в Bootstrap, пробовал все найденные решения в Интернете - ничего не помогает. Вот мой выпадающий (Я также использую строку и JSTL теги):Bootstrap add tooltip to dropdown

<div class="btn-group" style="margin-bottom:5px; width: 100%;"> 
       <a id="tableNameButton" data-placement="bottom" title="Text" class="my-tooltip my-dropdown tableNameButton btn btn-default btn-block btn-select" data-toggle="dropdown" href="#">Select table <span class="caret"></span></a> 
       <form:input class="form-control" id="tableNameFormId" path="tableName" style="visibility: hidden; display: none;" /> 
       <ul id="tableName" class="dropdown-menu scrollable-menu"> 
        <c:forEach items="${databaseTables}" var="databaseTable"> 
          <li><a href="#">${databaseTable}</a></li> 
        </c:forEach> 
       </ul> 
    </div> 

А на JavaScript:

$('.my-dropdown').dropdown(); 
$('.my-dropdown').tooltip(); 

Эта вещь не работает. Надеюсь, что кто-то уже решил эту проблему, спасибо заранее.

+0

ли Вы придаете JQuery, DOM готов? – dfsq

ответ

4

Проверьте, что вы правильно связали все и включили файл bootstrap.js. Я создал JSFIDDLE с вашим кодом и подсказке работы:

http://jsfiddle.net/shannabarnard/ueoxmm9v/

<div class="btn-group" style="margin-bottom:5px; width: 100%;"> 
    <a id="tableNameButton" data-placement="bottom" title="Text" class="my-tooltip my-dropdown tableNameButton btn btn-default btn-block btn-select" data-toggle="dropdown" href="#">Select table <span class="caret"></span></a> 

    <form:input class="form-control" id="tableNameFormId" path="tableName" style="visibility: hidden; display: none;" /> 
    <ul id="tableName" class="dropdown-menu scrollable-menu"> 
      <c:forEach items="${databaseTables}" var="databaseTable"> 
        <li><a href="#">${databaseTable}</a></li> 
      </c:forEach> 
    </ul> 
</div> 

JS

$('.my-dropdown').dropdown(); 
$('.my-dropdown').tooltip(); 
+0

Спасибо, теперь я понимаю, что это не проблема с этим кодом. – Steve

1

Я предполагаю, что это не работает, потому что вы не добавили данных-атрибутов как переключение данных и размещение данных. Попытайтесь добавить их, и я думаю, что это сработает.

См скрипку с рабочим например: http://jsfiddle.net/h56xw8wq/1/

Вы должны иметь как

<li class="dropdown" id="example" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" > ... </li> 

Надежда, что это поможет :)