应用场景：

在手机上要给列表中的每一项添加一个大段的介绍，应该用什么UI组件

A:

这里可以用，模态对话框，弹出提示，工具提示这类组件。模态对话框的好处，就是用关闭的按钮，用户操作方便；而弹出提示和工具提示只能通过点击来切换

模态对话框：

http://v2.bootcss.com/javascript.html#modals

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

Bootstrap 模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以切换模态框（Modal）插件的隐藏内容：

  • 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
  • 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框： 
    $('#identifier').modal(options)

实例

一个静态的模态窗口实例，如下面的实例所示：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 模态框（Modal）插件</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<h2>创建模态框（Modal）</h2>

<!-- 按钮触发模态框 -->

<button class="btn btn-primary btn-lg" data-toggle="modal"

   data-target="#myModal">

   开始演示模态框

</button>

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"

   aria-labelledby="myModalLabel" aria-hidden="true">

   <div class="modal-dialog">

      <div class="modal-content">

         <div class="modal-header">

            <button type="button" class="close"

               data-dismiss="modal" aria-hidden="true">

                  &times;

            </button>

            <h4 class="modal-title" id="myModalLabel">

               模态框（Modal）标题

            </h4>

         </div>

         <div class="modal-body">

            在这里添加一些文本

         </div>

         <div class="modal-footer">

            <button type="button" class="btn btn-default"

               data-dismiss="modal">关闭

            </button>

            <button type="button" class="btn btn-primary">

               提交更改

            </button>

         </div>

      </div><!-- /.modal-content -->

</div><!-- /.modal -->

</div>

</body>

</html>

尝试一下 »

结果如下所示：

代码讲解：

  • 使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
  • 如果您仔细查看上面的代码，您会发现在 <button> 标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
  • 在模态框中需要注意两点：
    1. 第一是 .modal，用来把 <div> 的内容识别为模态框。
    2. 第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
  • aria-labelledby="myModalLabel"，该属性引用模态框的标题。
  • 属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
  • <div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。
  • class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
  • data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
  • class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
  • class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
  • data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

选项

有一些选项可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称 类型/默认值 Data 属性名称 描述
backdrop boolean 或 string 'static'
默认值：true		 data-backdrop 指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
keyboard boolean
默认值：true		 data-keyboard 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
show boolean
默认值：true		 data-show 当初始化时显示模态框。
remote path
默认值：false		 data-remote 使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示：

<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

方法

下面是一些可与 modal() 一起使用的有用的方法。

方法 描述 实例
Options: .modal(options) 把内容作为模态框激活。接受一个可选的选项对象。 
$('#identifier').modal({

keyboard: false

})
Toggle: .modal('toggle') 手动切换模态框。 
$('#identifier').modal('toggle')
Show: .modal('show') 手动打开模态框。 
$('#identifier').modal('show')
Hide: .modal('hide') 手动隐藏模态框。 
$('#identifier').modal('hide')

实例

下面的实例演示了方法的用法：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 模态框（Modal）插件方法</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<h2>模态框（Modal）插件方法</h2>

<!-- 按钮触发模态框 -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

   开始演示模态框

</button>

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"

   aria-labelledby="myModalLabel" aria-hidden="true">

   <div class="modal-dialog">

      <div class="modal-content">

         <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal"

               aria-hidden="true">×

            </button>

            <h4 class="modal-title" id="myModalLabel">

               模态框（Modal）标题

            </h4>

         </div>

         <div class="modal-body">

            按下 ESC 按钮退出。

         </div>

         <div class="modal-footer">

            <button type="button" class="btn btn-default"

               data-dismiss="modal">关闭

            </button>

            <button type="button" class="btn btn-primary">

               提交更改

            </button>

         </div>

      </div><!-- /.modal-content -->

   </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

<script>

   $(function () { $('#myModal').modal({

      keyboard: true

   })});

</script>

</body>

</html>

尝试一下 »

结果如下所示：

只需要点击 ESC 键，模态窗口即会退出。

事件

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

事件 描述 实例
show.bs.modal 在调用 show 方法后触发。 
$('#identifier').on('show.bs.modal', function () {

  // 执行一些动作...

})
shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。 
$('#identifier').on('shown.bs.modal', function () {

  // 执行一些动作...

})
hide.bs.modal 当调用 hide 实例方法时触发。 
$('#identifier').on('hide.bs.modal', function () {

  // 执行一些动作...

})
hidden.bs.modal 当模态框完全对用户隐藏时触发。 
$('#identifier').on('hidden.bs.modal', function () {

  // 执行一些动作...

})

实例

下面的实例演示了事件的用法：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 模态框（Modal）插件事件</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<h2>模态框（Modal）插件事件</h2>

<!-- 按钮触发模态框 -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

   开始演示模态框

</button>

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"

   aria-labelledby="myModalLabel" aria-hidden="true">

   <div class="modal-dialog">

      <div class="modal-content">

         <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal"

               aria-hidden="true">×

            </button>

            <h4 class="modal-title" id="myModalLabel">

               模态框（Modal）标题

            </h4>

         </div>

         <div class="modal-body">

            点击关闭按钮检查事件功能。

         </div>

         <div class="modal-footer">

            <button type="button" class="btn btn-default"

               data-dismiss="modal">

               关闭

            </button>

            <button type="button" class="btn btn-primary">

               提交更改

            </button>

         </div>

      </div><!-- /.modal-content -->

   </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

<script>

   $(function () { $('#myModal').modal('hide')})});

</script>

<script>

   $(function () { $('#myModal').on('hide.bs.modal', function () {

      alert('嘿，我听说您喜欢模态框...');})

   });

</script>

</body>

</html>

尝试一下 »

结果如下所示：

正如上面实例所示，如果您点击了 关闭 按钮，即 hide 事件，则会显示一个警告消息。

Bootstrap 弹出框（Popover）插件

弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。

如果您想要单独引用该插件的功能，那么您需要引用 popover.js，它依赖于 工具提示（Tooltip）插件。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。您可以有以下两种方式添加弹出框（popover）：

  • 通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。

    <a href="#" data-toggle="popover" title="Example popover">
    
   请悬停在我的上面
    
</a>
  • 通过 JavaScript：通过 JavaScript 启用弹出框（popover）： 
    $('#identifier').popover(options)

弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：

$(function () { $("[data-toggle='popover']").popover(); });

实例

下面的实例演示了通过 data 属性使用弹出框（Popover）插件的用法。

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 弹出框（Popover）插件</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container" style="padding: 100px 50px 10px;" >

   <button type="button" class="btn btn-default" title="Popover title"

      data-container="body" data-toggle="popover" data-placement="left"

      data-content="左侧的 Popover 中的一些内容">

      左侧的 Popover

   </button>

   <button type="button" class="btn btn-primary" title="Popover title"

      data-container="body" data-toggle="popover" data-placement="top"

      data-content="顶部的 Popover 中的一些内容">

      顶部的 Popover

   </button>

   <button type="button" class="btn btn-success" title="Popover title"

      data-container="body" data-toggle="popover" data-placement="bottom"

      data-content="底部的 Popover 中的一些内容">

      底部的 Popover

   </button>

   <button type="button" class="btn btn-warning" title="Popover title"

      data-container="body" data-toggle="popover" data-placement="right"

      data-content="右侧的 Popover 中的一些内容">

      右侧的 Popover

   </button>

   </div>

   <script>$(function ()

      { $("[data-toggle='popover']").popover();

      });

   </script>

</div>

</body>

</html>

尝试一下 »

结果如下所示：

选项

有一些选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的。下表列出了这些选项：

选项名称 类型/默认值 Data 属性名称 描述
animation boolean
默认值：true		 data-animation 向弹出框应用 CSS 褪色过渡效果。
html boolean
默认值：false		 data-html 向弹出框插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement string|function
默认值：top		 data-placement 规定如何定位弹出框（即 top|bottom|left|right|auto）。
当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector string
默认值：false		 data-selector 如果提供了一个选择器，弹出框对象将被委派到指定的目标。
title string | function
默认值：''		 data-title 如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger string
默认值：'hover focus'		 data-trigger 定义如何触发弹出框： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。
delay number | object
默认值：0		 data-delay 延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：

delay:

{ show: 500, hide: 100 }
container string | false
默认值：false		 data-container 向指定元素追加弹出框。
实例： container: 'body'

方法

下面是一些弹出框（Popover）插件中有用的方法：

方法 描述 实例
Options: .popover(options) 向元素集合附加弹出框句柄。 
$().popover(options)
Toggle: .popover('toggle') 切换显示/隐藏元素的弹出框。 
$('#element').popover('toggle')
Show: .popover('show') 显示元素的弹出框。 
$('#element').popover('show')
Hide: .popover('hide') 隐藏元素的弹出框。 
$('#element').popover('hide')
Destroy: .popover('destroy') 隐藏并销毁元素的弹出框。 
$('#element').popover('destroy')

实例

下面的实例演示了弹出框（Popover）插件的方法：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 弹出框（Popover）插件方法</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container" style="padding: 100px 50px 10px;" >

   <button type="button" class="btn btn-default popover-show"

      title="Popover title" data-container="body"

      data-toggle="popover" data-placement="left"

      data-content="左侧的 Popover 中的一些内容 —— show 方法">

      左侧的 Popover

   </button>

   <button type="button" class="btn btn-primary popover-hide"

      title="Popover title" data-container="body"

      data-toggle="popover" data-placement="top"

      data-content="顶部的 Popover 中的一些内容 —— hide 方法">

      顶部的 Popover

   </button>

   <button type="button" class="btn btn-success popover-destroy"

      title="Popover title" data-container="body"

      data-toggle="popover" data-placement="bottom"

      data-content="底部的 Popover 中的一些内容 —— destroy 方法">

      底部的 Popover

   </button>

   <button type="button" class="btn btn-warning popover-toggle"

      title="Popover title" data-container="body"

      data-toggle="popover" data-placement="right"

      data-content="右侧的 Popover 中的一些内容 —— toggle 方法">

      右侧的 Popover

   </button><br><br><br><br><br><br>

   <p class="popover-options">

      <a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>"

         data-container="body" data-toggle="popover" data-content="

         <h4>Popover 中的一些内容 —— options 方法</h4>">

         Popover

      </a>

   </p>

   <script>

      $(function () { $('.popover-show').popover('show');});

      $(function () { $('.popover-hide').popover('hide');});

      $(function () { $('.popover-destroy').popover('destroy');});

      $(function () { $('.popover-toggle').popover('toggle');});

     $(function () { $(".popover-options a").popover({html : true });});

   </script>

</div>

</body>

</html>

尝试一下 »

结果如下所示：

事件

下表列出了弹出框（Popover）插件中要用到的事件。这些事件可在函数中当钩子使用。

事件 描述 实例
show.bs.popover 当调用 show 实例方法时立即触发该事件。 
$('#mypopover').on('show.bs.popover', function () {

  // 执行一些动作...

})
shown.bs.popover 当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 
$('#mypopover').on('shown.bs.popover', function () {

  // 执行一些动作...

})
hide.bs.popover 当调用 hide 实例方法时立即触发该事件。 
$('#mypopover').on('hide.bs.popover', function () {

  // 执行一些动作...

})
hidden.bs.popover 当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 
$('#mypopover').on('hidden.bs.popover', function () {

  // 执行一些动作...

})

实例

下面的实例演示了弹出框（Popover）插件的事件：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 弹出框（Popover）插件事件</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div clas="container" style="padding: 100px 50px 10px;" >

   <button type="button" class="btn btn-primary popover-show"

      title="Popover title" data-container="body"

      data-toggle="popover"

      data-content="左侧的 Popover 中的一些内容 —— show 方法">

      左侧的 Popover

   </button>

   </div>

   <script>

      $(function () { $('.popover-show').popover('show');});

      $(function () { $('.popover-show').on('shown.bs.popover', function () {

      alert("当显示时警告消息");

   })});

   </script>

</div>

</body>

</html>

尝试一下 »

结果如下所示：

 

Bootstrap 提示工具（Tooltip）插件

当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。

如果您想要单独引用该插件的功能，那么您需要引用 tooltip.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用bootstrap.js 或压缩版的 bootstrap.min.js。

用法

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加提示工具（tooltip）：

  • 通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

    <a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
  • 通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）： 
    $('#identifier').tooltip(options)

提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：

$(function () { $("[data-toggle='tooltip']").tooltip(); });

实例

下面的实例演示了通过 data 属性使用提示工具（Tooltip）插件的用法。

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 提示工具（Tooltip）插件</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<h4>提示工具（Tooltip）插件 - 锚</h4>

这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"

   title="默认的 Tooltip">

   默认的 Tooltip

</a>.

这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"

   data-placement="left" title="左侧的 Tooltip">

   左侧的 Tooltip

</a>.

这是一个 <a href="#" data-toggle="tooltip" data-placement="top"

   title="顶部的 Tooltip">

   顶部的 Tooltip

</a>.

这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom"

   title="底部的 Tooltip">

   底部的 Tooltip

</a>.

这是一个 <a href="#" data-toggle="tooltip" data-placement="right"

   title="右侧的 Tooltip">

   右侧的 Tooltip

</a>

<br>

<h4>提示工具（Tooltip）插件 - 按钮</h4>

<button type="button" class="btn btn-default" data-toggle="tooltip"

   title="默认的 Tooltip">

   默认的 Tooltip

</button>

<button type="button" class="btn btn-default" data-toggle="tooltip"

   data-placement="left" title="左侧的 Tooltip">

   左侧的 Tooltip

</button>

<button type="button" class="btn btn-default" data-toggle="tooltip"

   data-placement="top" title="顶部的 Tooltip">

   顶部的 Tooltip

</button>

<button type="button" class="btn btn-default" data-toggle="tooltip"

   data-placement="bottom" title="底部的 Tooltip">

   底部的 Tooltip

</button>

<button type="button" class="btn btn-default" data-toggle="tooltip"

   data-placement="right" title="右侧的 Tooltip">

   右侧的 Tooltip

</button>

<script>

   $(function () { $("[data-toggle='tooltip']").tooltip(); });

</script>

</body>

</html>

尝试一下 »

结果如下所示：

选项

有一些选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的。下表列出了这些选项：

选项名称 类型/默认值 Data 属性名称 描述
animation boolean
默认值：true		 data-animation 提示工具使用 CSS 渐变滤镜效果。
html boolean
默认值：false		 data-html 向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement string|function
默认值：top		 data-placement 规定如何定位提示工具（即 top|bottom|left|right|auto）。
当指定为 auto 时，会动态调整提示工具。例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector string
默认值：false		 data-selector 如果提供了一个选择器，提示工具对象将被委派到指定的目标。
title string | function
默认值：''		 data-title 如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger string
默认值：'hover focus'		 data-trigger 定义如何触发提示工具： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。
content string | function
默认值：''		 data-content 如果未指定 data-content 属性，则使用默认的 content 值。
delay number | object
默认值：0		 data-delay 延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：

delay:

{ show: 500, hide: 100 }
container string | false
默认值：false		 data-container 向指定元素追加提示工具。
实例： container: 'body'

方法

下面是一些提示工具（Tooltip）插件中有用的方法：

方法 描述 实例
Options: .tooltip(options) 向元素集合附加提示工具句柄。 
$().tooltip(options)
Toggle: .tooltip('toggle') 切换显示/隐藏元素的提示工具。 
$('#element').tooltip('toggle')
Show: .tooltip('show') 显示元素的提示工具。 
$('#element').tooltip('show')
Hide: .tooltip('hide') 隐藏元素的提示工具。 
$('#element').tooltip('hide')
Destroy: .tooltip('destroy') 隐藏并销毁元素的提示工具。 
$('#element').tooltip('destroy')

实例

下面的实例演示了提示工具（Tooltip）插件方法的用法。

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 提示工具（Tooltip）插件方法</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div style="padding: 100px 100px 10px;">

   这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"

      title="show">Tooltip 方法 show

   </a>.

   这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip"

      data-placement="left" title="hide">Tooltip 方法 hide

   </a>.

   这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip"

      data-placement="top" title="destroy">Tooltip 方法 destroy

   </a>.

   这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip"

      data-placement="bottom" title="toggle">Tooltip 方法 toggle

   </a>.

   <br><br><br><br><br><br>

   <p class="tooltip-options" >

      这是一个 <a href="#" data-toggle="tooltip" title="<h2>'am Header2

         </h2>">Tooltip 方法 options

      </a>.

   </p>

   <script>

      $(function () { $('.tooltip-show').tooltip('show');});

      $(function () { $('.tooltip-hide').tooltip('hide');});

      $(function () { $('.tooltip-destroy').tooltip('destroy');});

      $(function () { $('.tooltip-toggle').tooltip('toggle');});

      $(function () { $(".tooltip-options a").tooltip({html : true });

      });

   </script>

<div>

</body>

</html>

尝试一下 »

结果如下所示：

事件

下表列出了提示工具（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>

   <title>Bootstrap 实例 - 提示工具（Tooltip）插件事件</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<h4>提示工具（Tooltip）插件 - 锚</h4>

这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"

   title="默认的 Tooltip">默认的 Tooltip

</a>.

<script>

$(function () { $('.tooltip-show').tooltip('show');});

$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {

   alert("Alert message on show");

})});

</script>

</body>

</html>

尝试一下 »

结果如下所示：

交互设计：隐藏或显示大段文本的UI组件有哪些？的更多相关文章

  1. Html大段文本自适应换行显示-SSM

    只处理前端: <style> .ctl{ table-layout:fixed } .ctl td{ word-break:break-all } </style> <d ...

  2. 用jdbc访问大段文本数据

    package it.cast.jdbc; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.F ...

  3. 【附案例】UI交互设计不会做？设计大神带你开启动效灵感之路

    随着网络技术的创新发展,如今UI交互设计应用越来越广泛,显然已经成为设计的主流及流行的必然趋势.UI界面交互设计中的动效包括移动,滑块,悬停效果,GIF动画等.UI界面交互设计为何越来越受到青睐?它有 ...

  4. php 两段文本对比，不同的文字显示高亮

    php 两段文本对比,不同的文字显示高亮[下面这个只能区分错误后面的..]   <?php $str1 ="MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwgg ...

  5. web设计经验<三>值得你深入了解的交互设计5大支柱

    随着单页式设计和移动端的兴起,网页中的交互设计越来越重要了.为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解. 正如同我们在<交互设计最佳实践(卷1)>中所述,要做好交互设计 ...

  6. HTML(多行)文本超过部分隐藏,末尾显示(...)

    HTML(多行)文本超过部分隐藏,末尾显示(...) <!DOCTYPE html> <html> <head> <meta charset="ut ...

  7. CSS之 元素显示隐藏，用户界面样式，文本溢出隐藏，精灵技术，三角形

    元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...

  8. 《About Face 3：交互设计精髓》【PDF】下载

    <About Face 3:交互设计精髓>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230384328 内容简介 全书分成3篇:第1 ...

  9. JS实现“隐藏与显示”功能(多种方法)

    1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

随机推荐

  1. WAMP配置虚拟目录

    1.启动wamp所有服务,输入localhost或localhost:端口号确保wamp环境正常无误. 2.设置httpd.conf 2.1打开文件:单击wamp在电脑右下角的图标=>wamp= ...

  2. Spring注解驱动开发之AOP

    前言:现今SpringBoot.SpringCloud技术非常火热,作为Spring之上的框架,他们大量使用到了Spring的一些底层注解.原理,比如@Conditional.@Import.@Ena ...

  3. js对象数组深度去重和深度排序

    使用collect.js处理数组和对象 https://github.com/ecrmnn/collect.js/# 引入collect.js https://github.com/ecrmnn/co ...

  4. BaseAdapter的优化

    传统的 package cct.commonadapter.bean; import android.content.Context; import android.view.LayoutInflat ...

  5. 10.3 Implementing pointers and objects and 10.4 Representing rooted trees

    Algorithms 10.3 Implementing pointers and  objects  and 10.4 Representing rooted trees Allocating an ...

  6. 恩智浦Freescale Cortex-A9 迅为IMX6开发板平台初体验

    iTOP-i.MX6 开发板预装 Android4.4 系统,采用 9.7 寸(或者 7 寸或者 4.3 寸)IPS 屏 幕,至少 5 点以上触控,操作流畅,无论是高清视频.游戏等都会有上佳的表现,实 ...

  7. 针对windowsserver 创建iis站点访问出错的解决方案（HTTP 错误 500.19 - Internal Server Error）

    错误如下:   服务器错误 Internet信息服务 7.0 错误摘要HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 详 ...

  8. STL:set的使用

    关于set set是以特定的顺序存储相异元素的容器. set是关联式容器,C++ STL中标准关联容器set, multiset, map, multimap内部采用的就是一种非常高效的平衡检索二叉树 ...

  9. PHP 中 include() 与 require() 的区别说明

    引用文件的方法有两种:require 及 include.两种方式提供不同的使用弹性. require 的使用方法如 require("MyRequireFile.php"); . ...

  10. 0.ssm web项目中的遇到的坑

    1.自定义的菜单,href为项目的相对路径,即: : 点击一个菜单,后再点击另一个菜单,然后发现浏览器地址栏的链接是在上一个链接后面拼接的,也就报错了. 解决办法: 每一个菜单的href前增加&quo ...