首页 > 其他 > 详细

收集bootstrap的几个常用用法---tooltip提示框

时间:2014-04-18 23:17:58      阅读:410      评论:0      收藏:0      [点我收藏+]

bootst确实比较好用,不过官网的手册不是很详细,现自己收录好例子,倒是直接粘贴到项目中

1,提示框功能,此功能常用,自己写比较浪费功夫

最基本例子如下,上下左右的提示

bubuko.com,布布扣
       <ul class="example" style="list-style:none;">
            <li>
                <a class="atip" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</a>
            </li>
            <li>
                <a href="#" class="atip" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</a>
            </li>
            <li>
                <a href="#" class="atip" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</a>
            </li>
            <li>
                <a href="#" class="atip" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</a>
            </li>
        </ul>

      <script>
        $(function(){
            $(".atip").tooltip();
            
        });
    </script>
bubuko.com,布布扣

tooltips官方提供了很多参数,使用方法如下

bubuko.com,布布扣
      <script>
        $(function(){
            $(".atip").tooltip();
            options={
                    delay: { show: 500, hide: 100 },
                    trigger:‘click‘,
                    };
            $(".optiontip").tooltip(options);
        });
    </script>
bubuko.com,布布扣

有delay,tigger等等参数

 

还有个差不多的叫popover,样子是两层提示,一个标题,一个提示

格式如下,参数完全一样,多个content

bubuko.com,布布扣
<a class="btn  btn-success"  id=‘pop‘ type="submit" rel="popover" title="泡芙提示" data-content="泡芙提示泡芙提示">  泡芙提示泡芙提示泡芙提示</a>


      <script>
        $(function(){
            $(#pop).popover();
        });
    </script>
bubuko.com,布布扣

 

 

收集bootstrap的几个常用用法---tooltip提示框,布布扣,bubuko.com

收集bootstrap的几个常用用法---tooltip提示框

原文:http://www.cnblogs.com/dk1988/p/3670561.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!