Bootstrap Snippet Understanding Tooltips using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
  <div class="row">
    <h2>Tooltips with OPTIONS set in HTML <small>but initialized in JS</small></h2>    
    <hr>
    <a href="" data-toggle="myToolTip" data-placement="top" title="Quack!"><img src = "https://www.google.ca/search?q=duck+pictures&espv=2&biw=1268&bih=925&tbm=isch&imgil=1l-sZCAUkebKyM%253A%253B0mrznG83yICHQM%253Bhttp%25253A%25252F%25252Fkindersay.com%25252Fsigns%25252Fduck&source=iu&pf=m&fir=1l-sZCAUkebKyM%253A%252C0mrznG83yICHQM%252C_&usg=__Ugk9hR2XRjLSy7gvJpBbtvgbTBo%3D&ved=0CDsQyjc&ei=-zclVebJOdicygS6zoCABQ#imgrc=1l-sZCAUkebKyM%253A%3B0mrznG83yICHQM%3Bhttp%253A%252F%252Fkindersay.com%252Ffiles%252Fimages%252Fduck.png%3Bhttp%253A%252F%252Fkindersay.com%252Fsigns%252Fduck%3B445%3B355" alt = ""></a>
    <hr>
    <a href="#" data-toggle="myToolTip" data-placement="top" data-delay='{"show":2000, "hide":3000}' title="Tooltip with BIG delay" >
    Default Tooltip with 2 second delay and 3 second hide delay </a>
    <hr>
    <a href="#" data-toggle="myToolTip" data-placement="top"
      data-template='<div class="myToolTip" role="tooltip"><div class="tooltip-arrow">arrow</div><div class="tooltip-inner">inner</div></div>'>
    Tooltip with template NOT WORKING???</a>
    <hr>
    <a href="#" data-toggle="myToolTip" data-placement="top" data-html="true"  title="Fancy <b>tooltip<b>  <h4>tooltip<h4></a>">Tooltip contains HTML</a>
    <hr>
    <button type="button" class="btn btn-default" data-toggle="btnToolTip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
    <hr>
    <button type="button" class="btn btn-default" data-toggle="btnToolTip" data-placement="right" data-trigger="click" title="Tooltip on right">Tooltip you must CLICK on</button>
    <hr>
    <h2>Tooltips with OPTIONS set in JS</h2>
    <div>
      <ul>
        <li><a href="#" class="tip-top" title="Tooltip on the top side">Tooltip on top</a></li>
        <li><a href="#" class="tip-right" title="Tooltip on the right side">Tooltip on right</a></li>
        <li><a href="#" class="tip-bottom" title="Tooltip the on bottom side">Tooltip on bottom</a></li>
        <li><a href="#" class="tip-left" title="<b class='myColor'>Tooltip</b> on the left <i>side</i> with <h2>HTML</h2>">
          Tooltip on left with HTML set with JavaScript</a></li>
        <li><a href="#" class="tip-auto" title="<b class='myColor'>Tooltip</b> set to auto <i>side</i> with <h2>HTML</h2>">
          Tooltip set to auto  with HTML set with JavaScript</a></li>
      </ul>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
.myColor{
 color:red;   
}    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
Tooltips can seem a little confusing, this example should clarify
For performance reasons, the Tooltip and Popover data-apis are opt-in,
meaning you MUST initialize them yourself via JavaScript.
Ref: http://getbootstrap.com/javascript/#tooltips
One way to initialize all tooltips on a page would be to select them by their "data-toggle" attribute:
$(function () {
  $('[data-toggle="myToolTip"]').tooltip()
})
Note: the "data-toggle" is in the HTML, like this:
data-toggle="myToolTip"
Tool tips may also be called by id or Class
$('some id or class that you add to the above a tag').tooltip()
Here is some JavaScript that does both, for a a link, and a button
top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
*/
$(document).ready(function(){
// Method 1 - uses 'data-toggle' to initialize
$('[data-toggle="myToolTip"]').tooltip();   
/* - - - - - - - - - - - - - - - - - - - */
// Method 2 - uses the id, class or native tag, could use .btn as class 
$('button').tooltip();
// options set in JS by class
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Understanding Tooltips"
Bootstrap 3.3.0 Snippet by Jheroux

Related: See More

Questions / Comments:

"Understanding Tooltips" Bootstrap 3.3.0 Snippet by Jheroux

Related: See More

Questions / Comments:

"Understanding Tooltips"
Bootstrap 3.3.0 Snippet by Jheroux