带有属性的Bootstrap Tooltip插件-前端实例代码

!DOCTYPE htmlhtmlheadtitleTry v1.2 Bootstrap Online/titlelink href=/bootstrap/css/bootstrap.min.css rel=stylesheet

编程学习网为您整理以下代码实例，主要实现：带有属性的Bootstrap Tooltip插件，希望可以帮到各位朋友。

<!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>

基础教程推荐