<!DOCTYPE html>
<html>
<head>
<title>Try v1.2 Bootstrap Online</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Tooltip examples for anchors</h4>
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
title = "Tooltip on left"> Default Tooltip</a>.
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "top"
title = "Tooltip on top">Tooltip on Top</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
title = "Tooltip on bottom">Tooltip on Bottom</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "right"
title = "Tooltip on right">Tooltip on Right</a>
<br>
<h4>Tooltip examples for buttons</h4>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
Default Tooltip
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "left" title = "Tooltip on left">
Tooltip on left
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "top" title = "Tooltip on top">
Tooltip on top
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "bottom" title = "Tooltip on bottom">
Tooltip on bottom
</button>
<button type = " button" class = " btn btn-default" data-toggle = "tooltip"
data-placement = "right" title = "Tooltip on right">
Tooltip on right
</button>
<script>
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>
</body>
</html>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/264794.html