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>

  • 相关阅读:
    PHP“Cannot use object of type stdClass as array”
    JS简单循环遍历json数组的方法
    省市区、民族下拉列表框
    java 代码获取视频时长
    CentOs 相关
    曾经遇过的sql问题
    在线分享代码
    ssm 数据库连接池配置
    代码片段
    java 常见问题
  • 原文地址:https://www.cnblogs.com/melao2006/p/5005839.html
Copyright © 2011-2022 走看看