Janie Janie - 3 days ago 6
jQuery Question

Bootstrap tooltip not working

I'm trying to show my tooltip but it is not working. What have I tried

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"
});
});


My bootstrap version
3.3.5
and jQuery version
1.11.3


Where is my issue? Any suggestion will be appreciated.

Answer

I think your solution is perfect, except you have given option as trigger:click, for your tooltip to be visible.

Without trigger:click - displays tooltip on hover

$(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>

With trigger:click- displays tooltip on 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>

Comments