码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap-提示标签、提示框

时间:2016-12-08 03:34:04      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:btn   back   com   href   min   cli   alert   标签   round   

提示标签:

<body>
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <p>
                <a href="#" class="tool" data-toggle="tooltip" data-placement="top" title="用来开发网站的">java</a>
                一种语言
            </p>
            <p>
                <a href="#" class="tool" data-toggle="tooltip" data-placement="bottom" title="用来开发网站的">java</a>
                一种语言
            </p>
        </div>
        <div class="col-lg-6">
            <p>
                <a href="#" class="tool" data-toggle="tooltip" data-placement="left" title="用来开发网站的">java</a>
                一种语言
            </p>
            <p>
                <a href="#" class="tool" data-toggle="tooltip" data-placement="right" title="用来开发网站的">java</a>
                一种语言
            </p>
        </div>
    </div>
</div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
    //$(‘.tool‘).tooltip();    
    $(.tool).tooltip(show);    

    $(.tool).on(hidden.bs.tooltip, function () {
          alert(隐藏了);
    })
</script>
</body>

效果:

技术分享

提示框:

<body>
<div class="container">
    <div class="row">
        <!--这边用的hover触发的-->
        <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here‘s some amazing content. It‘s very engaging. Right?" data-delay=‘{"show": 1000, "hide": 1000 }‘ data-trigger="hover">Click to toggle popover</button>
    </div>
</div>

<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
    $(.btn).popover(show);
})
</script>
</body>

效果:

技术分享

bootstrap-提示标签、提示框

标签:btn   back   com   href   min   cli   alert   标签   round   

原文地址:http://www.cnblogs.com/tenWood/p/6143461.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!