CODEWITHSUNDEEP
jquerytwitter-bootstraptooltip
Janie
Janie

Reputation: 646

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.

Upvotes: 0

Views: 3751

Answers (2)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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>

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Check this:

To create a tooltip, add the data-toggle="tooltip" attribute to an element.

Use the title attribute to specify the text that should be displayed inside the tooltip:

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

but in your case title is missing. Add a title and try again.

Working Demo

Upvotes: 2

Related Questions