zoukankan      html  css  js  c++  java
  • Bootstrap 提示工具(Tooltip)插件的事件

    事件

    下表列出了提示工具(Tooltip)插件中要用到的事件。这些事件可在函数中当钩子使用。

    事件描述实例
    show.bs.tooltip 当调用 show 实例方法时立即触发该事件。
    $('#myTooltip').on('show.bs.tooltip', function () {
      // 执行一些动作...
    })
    shown.bs.tooltip 当提示工具对用户可见时触发该事件(将等待 CSS 过渡效果完成)。
    $('#myTooltip').on('shown.bs.tooltip', function () {
      // 执行一些动作...
    })
    hide.bs.tooltip 当调用 hide 实例方法时立即触发该事件。
    $('#myTooltip').on('hide.bs.tooltip', function () {
      // 执行一些动作...
    })
    hidden.bs.tooltip 当提示工具对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。
    $('#myTooltip').on('hidden.bs.tooltip', function () {
      // 执行一些动作...
    })

    实例

    下面的实例演示了提示工具(Tooltip)插件事件的用法。

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bootstrap 提示工具(Tooltip)插件的事件</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    <script src="jQuery/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div style="padding:30px">
    这是一个<a href="#"data-toggle="tooltip" class="tooltip-show" data-placement="bottom" title="Tooltip方法show">Tooltip方法show</a>
    </div>
    <script>
    $(document).ready(function () {
    $("a[data-toggle='tooltip']").tooltip("show");
    $("a[data-toggle='tooltip']").on("show.bs.tooltip", function () {
    alert("alert message on show")
    })

    })
    </script>
    </body>
    </html>

  • 相关阅读:
    shift and/or 算法
    FFT求解字符串匹配
    hdu 6981/ 2021“MINIEYE杯”中国大学生算法设计超级联赛(3)1009 Rise in Price(剪枝,dp合并)
    Rancher监控指标一文干到底(workload metrics)
    RocketMQ详解(二)启动运行原理
    新人如何快速剖析源码
    RocketMQ详解(三)核心设计原理(待完善)
    windows powershell下载文件的4种方式
    windows 调用bat脚本时pause处理
    python3 中的b''解析
  • 原文地址:https://www.cnblogs.com/melao2006/p/5005839.html
Copyright © 2011-2022 走看看