应用场景：

在手机上要给列表中的每一项添加一个大段的介绍，应该用什么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. Codeforces Round #138 (Div. 1)

    A 记得以前做过 当时好像没做对 就是找个子串 满足括号的匹配 []最多的 开两个栈模拟 标记下就行 #include <iostream> #include<cstring> ...

  2. window.form增删改查

    效果展示: 查询: 可以查询姓名:民族:姓名+民族:都是空的查询全部 取值取得是姓名: 删除: 修改: 先选中查询之后修改: 添加: 代码部分: 第一张表: 第二张表:主表,民族代码加名称 natio ...

  3. vue-router: $router.push遇到的问题

    如下图使用path时,跳转路由后的页面this.$route.params为undefined 改为name时,this.$route.params可以正确获取数据,如下图: 此为官方定义的固定搭配: ...

  4. JDK1.8中的Stream详解

    Stream简介 Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX 对 XML ...

  5. 導出Excel方法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  6. 所有的工作目录 都要svn_开头，并且要进行svn同步，你能保证你不删除，你保证不了非你！

    所有的工作目录 都要svn_开头,并且要进行svn同步,你能保证你不删除,你保证不了非你! 血的代价啊~

  7. 单页vue路由router

    Vue.js + vue-router 可以很简单的实现单页应用. <router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容. to 属性为目标地址, ...

  8. mysql创建中文编码库

    [2013/5/27 16:06:08] LuoXingchen: Create MySQL Database with Chinese supported:        mysql> cre ...

  9. eclipse修改xml文件默认的打开方式为XML Editor

    1.菜单:Window   ->   Preferences   ->   General   ->   Editors   ->   File   Associations  ...

  10. js页面文字选中后分享实现

    var $sinaMiniBlogShare = function(eleShare, eleContainer) { var eleTitle = document.getElementsByTag ...