Как добавить всплывающую подсказку twitter для значка

Я бы добавил правую подсказку из бутстрапа twitter в элемент значка.

Код выглядит так:

<h3>Sensors Permissions <i class="icon-info-sign"></i></h3>

Я бы сказал, что, когда курсор над значком, отображается правая подсказка с некоторой информацией...

Как я могу это сделать? Это недостаточно, чтобы добавить лирику tooltip.js и поместить элемент в код значка? Я в замешательстве.

Спасибо.

Ответы

Ответ 1

Я недавно использовал его так:

 <i class="icon-ok-sign" rel="tooltip" title="Key active" id="blah"></i>

Что производит:

enter image description here

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

$(document).ready(function(){
    $("[rel=tooltip]").tooltip({ placement: 'right'});
});

Как уже упоминалось в комментариях, вы можете найти другие атрибуты/опции здесь.

Ответ 2

Вы можете забыть инициализировать свои всплывающие подсказки с помощью .tooltip().

Функция .tooltip() должна вызываться для каждого элемента, в котором вы хотите прослушивать всплывающую подсказку. Это для целей производительности. Вы можете инициализировать связку сразу, вызывая функцию у родителя, например: $('.tooltip-group').tooltip()

Просмотр функции инициализации одного элемента в JSFiddle.

Javascript

$(document).ready(function() {
  $('#example').tooltip();
});

Разметка

<h3>
  Sensors Permissions
  <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>

Ответ 3

@nickhar answer, используя data-toggle="tooltip", протестированный с помощью Bootstrap 2.3.2 и 3.0:

 <i class="icon-ok-sign" data-toggle="tooltip" title="Key active" id="blah"></i>

Что производит:

enter image description here

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

$(document).ready(function(){
    $("[data-toggle=tooltip]").tooltip({ placement: 'right'});
});

Как уже упоминалось в комментариях, вы можете найти другие атрибуты/опции здесь.

Ответ 4

в javascript

$(function () {
    $(".has-tooltip-right").tooltip({ placement: 'right'}); 
    $(".has-tooltip-left").tooltip({ placement: 'left'}); 
    $(".has-tooltip-bottom").tooltip({ placement: 'bottom'}); 
    $(".has-tooltip").tooltip(); 
});

в html

<a href="#" class="has-tooltip-bottom" title="" data-original-title="Tooltip">This link</a> 
and <a href="#" class="has-tooltip" title="" data-original-title="Another link">that link</a>