zoukankan      html  css  js  c++  java
  • 收集bootstrap的几个常用用法---tooltip提示框

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

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

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

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

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

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

    有delay,tigger等等参数

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

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

    <a class="btn  btn-success"  id='pop' type="submit" rel="popover" title="泡芙提示" data-content="泡芙提示泡芙提示">  泡芙提示泡芙提示泡芙提示</a>
    
    
          <script>
            $(function(){
                $('#pop').popover();
            });
        </script>
  • 相关阅读:
    P6329 【模板】点分树 | 震波
    Luogu P3350 [ZJOI2016]旅行者
    Luogu [ZJOI2015]幻想乡战略游戏
    斐波那契数列简单性质
    Luogu P2056 [ZJOI2007]捉迷藏
    Luogu P4127 [AHOI2009]同类分布
    A funny story in regard to a linux newbie
    Inside the c++ object module 阅读摘要
    java并发编程
    JVM执行引擎总结(读《深入理解JVM》) 早期编译优化 DCE for java
  • 原文地址:https://www.cnblogs.com/dk1988/p/3670561.html
Copyright © 2011-2022 走看看