"tooltip JQuery"
Bootstrap 3.0.0 Snippet by CharlesStone

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="aaa">aaaaa</button>
<hr />
<button id="bbb">bbbbb</button>
<hr />
<button id="ccc">ccccc</button>
<hr />
<button id="ddd">ddddd</button>
<hr />
<button id="eee" title="">eeeee</button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$( function() {
$(document).tooltip({
items: "#aaa, #bbb, #ccc, #ddd",
position: {my: 'left+15 top', at: 'right top', collision: 'flipfit'},
content: function() {
return "<iframe src='https://cdn.mozilla.net/pdfjs/tracemonkey.pdf' width='300px' height='300px'>";
}
});
$("#eee").tooltip({
position: {my: 'left+15 top', at: 'right top', collision: 'flipfit'},
content: function() {
return "<iframe src='https://cdn.mozilla.net/pdfjs/tracemonkey.pdf' width='300px' height='300px'>";
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: