`

BootStrap 工具提示ToolTip

javascripthtml 
阅读更多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />



       
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<title>bootstrap弹出框工具</title>
</head>

<body>

        <div class="bs-example tooltip-demo" style="margin:200px;">
          <div class="bs-example-tooltips">
            <button title="" data-placement="left" data-toggle="tooltip" class="btn" type="button" data-original-title="Tooltip on left">左侧Tooltip</button>
            <button title="" data-placement="top" data-toggle="tooltip" class="btn" type="button" data-original-title="Tooltip on top">上方Tooltip</button>
            <button title="" data-placement="bottom" data-toggle="tooltip" class="btn" type="button" data-original-title="Tooltip on bottom">下方Tooltip</button>
            <button title="" data-placement="right" data-toggle="tooltip" class="btn" type="button" data-original-title="Tooltip on right">右侧Tooltip</button>
          </div>
        </div>
<script type="text/javascript">
$(function(){
var options={
animation:true,
trigger:'hover' //触发tooltip的事件
}
$('.btn').tooltip(options);
//$('#tip1').tooltip('show');//指定显示某一个tooltip//还可取值hide toggle

});
</script>
</body>
</html>
分享到：
| 网页制作中Iframe自适应高度的解决办法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics