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>
    
    
    
<h1>Muttley Tooltip (Basic)</h1> 
    <img data-toggle="myToolTip" data-placement="top" data-html="true"
    src="https://pbs.twimg.com/profile_images/3603945500/a5e6d6baa484769bf20c0c7c774db8b9.jpeg"
    alt="alternative text" title="Muttley Man rocks"/>
<h1>Muttley Tooltip with 2 second delay and 3 second hide delay
    <img data-toggle="myToolTip" data-placement="top" data-delay='{"show":2000, "hide":3000}' src="https://pbs.twimg.com/profile_images/3603945500/a5e6d6baa484769bf20c0c7c774db8b9.jpeg"  alt="alternative text" title="Muttley Man rocks"/>
</h1>
<h1>Muttley Tooltip with HTML</h1>
     <img data-toggle="myToolTip" data-placement="top" data-html="true"
     src="https://pbs.twimg.com/profile_images/3603945500/a5e6d6baa484769bf20c0c7c774db8b9.jpeg"
     alt="alternative text" title="<h3>Muttley</h3> Man rocks"/>
<h1>Muttley Tooltip with Color</h1>
     <img data-toggle="myToolTip" data-placement="top" data-html="true"
     src="https://pbs.twimg.com/profile_images/3603945500/a5e6d6baa484769bf20c0c7c774db8b9.jpeg"
     alt="alternative text" title="<b class='myColor'>Muttley</b> is going <i></i>on a roll <h2>to the HTML store</h2>"/>
    
  
     <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>'>
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 Bikamek11

Related: See More

Questions / Comments:

"Understanding Tooltips" Bootstrap 3.3.0 Snippet by Bikamek11

Related: See More

Questions / Comments:

"Understanding Tooltips"
Bootstrap 3.3.0 Snippet by Bikamek11