Всплывающая подсказка Bootstrap не работает

Question

Я пытаюсь показать свою подсказку, но она не работает. Что есть я пытался

HTML

<a href="javascript:void(0);" data-toggle="tooltip">Hyperlink Text</a> 

JS

$(document).ready(function() { 
    //$("body").tooltip({ selector: '[data-toggle=tooltip]' }); 
    $('[data-toggle=tooltip]').tooltip({ 
     title: "<h1 style='background-color: #F00; color: #000;'>This is a test tooltips</h1>", 
     html: true, 
     placement: "bottom", 
     trigger: "click" 
    }); 
}); 

Моя самозагрузки версия 3.3.5 и JQuery версии 1.11.3

Где моя проблема? Любое предложение будет оценено по достоинству.

Answer 1

Я думаю, что ваше решение является совершенным, за исключением того, вы дали в качестве опции trigger:click, для tooltip быть видимым.

Без trigger:click - отображает всплывающую подсказку при наведении курсора мыши

$(document).ready(function() { 
 
    $('#togle').tooltip({ 
 
     title: "<h1 style='background-color: #F00; color: #000;'>This is a test tooltips</h1>", 
 
     html: true, 
 
     placement: "bottom" 
 
    }); 
 
    
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<a href="javascript:void(0);" id="togle" data-toggle="tooltip">Hyperlink Text</a>

С trigger:click - отображает всплывающую подсказку по щелчку

$(document).ready(function() { 
 
    $('#togle').tooltip({ 
 
     title: "<h1 style='background-color: #F00; color: #000;'>This is a test tooltips</h1>", 
 
     html: true, 
 
     placement: "bottom", 
 
     trigger:"click" 
 
    }); 
 
    
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<a href="javascript:void(0);" id="togle" data-toggle="tooltip">Hyperlink Text</a>

Answer 2

Проверьте это:

Чтобы создать всплывающую подсказку, добавить данные рычажков = «подсказка» атрибут к элементу.

Используйте название атрибут , чтобы указать текст, который должен отображаться в подсказке:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> 

но в заголовке дела отсутствует. Добавьте заголовок и повторите попытку.

Working Demo