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

  • 相关阅读:
    java线程池
    Mongodb 常见的查询语句及与 mysql 对比
    jhipster入门
    Django基础笔记
    python编程的简洁代码
    Pyhon环境变量的一些坑
    win10下解压版mysql-8.0.12安装教程
    Win10改AHCI无需重装系统(无需改注册表)的方法
    windows10用xshell连接xbox里安装的ubantu(18.04)
    本地图片变成网络图片
  • 原文地址:https://www.cnblogs.com/professional-NET/p/4843111.html
Copyright © 2011-2022 走看看