zoukankan      html  css  js  c++  java
  • Bootstrap中tooltip的使用

    首先的把相关样式和脚步文件引入,其次是激活tooltip:$(function(){$("[data-toggle='tooltip']").tooltip();});

    js代码:

     <script type="text/javascript">
    
            $(function () {
                $("[data-toggle='tooltip']").tooltip();
                $(".tooltip-show").tooltip("show");
                $(".tooltip-show").on("show.bs.tooltip", function () {
                    alert("this is test for show! ");
    
                })
    
                $(".tooltip-hide").tooltip("hide");
                $(".tooltip-toggle").tooltip("toggle");
                $(".tooltip-options a").tooltip({ html: true });
    
            });
        </script>
    View Code

    html代码:

     <div class="container">
            <br />
            <br />
            <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="right" title="tooltip">
                hover myself</a>
            <br />
            <br />
            <a href="#" class=" btn btn-default" data-toggle="tooltip" data-html="<h3>我</h3>"
                data-animation="false" data-placement="right" title="tooltip">data-placement show</a>
            <br />
            <br />
            <a href="#" class="tooltip-show" data-toggle="tooltip" data-placement="right" title="tooltip">
                tooltip-show</a>
            <br />
            <br />
            <a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="right" title="tooltip">
                tooltip-hide</a>
            <br />
            <br />
            <a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="right" title="tooltip">
                tooltip-toggle</a>
            <br />
            <br />
            <p class="tooltip-options">
                <a href="#" data-toggle="tooltip" title="<h3>tooltip</h3>">tooltip-toggle</a>
            </p>
        </div>
    View Code

    效果图:

    相关选项方法和事件的解读引用自:runoob

  • 相关阅读:
    spring cloud中代理服务器zuul的使用
    springcloud断路器Dashboard监控仪表盘的使用
    Java中 final和static解析
    使用redis和thread告警并避免重复告警
    Windows 下redis的安装和使用
    服务端监控工具Nmon使用方法
    linux性能监控工具nmon生成HTML报告-EasyNmon
    接口测试用例设计
    RESTful API浅谈
    接口测试与总结
  • 原文地址:https://www.cnblogs.com/professional-NET/p/4843111.html
Copyright © 2011-2022 走看看