编辑于 Github

提示 - 临 零件

使用CSS3为CSS和JavaScript添加自定义Bootstrap工具提示的文档和示例，用于动画和用于本地标题存储的数据属性。

例子

将鼠标悬停在下面的链接上可查看工具提示:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

静态演示

Four options are available: top, right, bottom, and left aligned.

互动演示

Hover over the buttons below to see their tooltips.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

And with custom HTML added:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

用法

工具提示插件根据需要生成内容和标记，默认情况下会在触发元素后面放置工具提示。

通过JavaScript触发工具提示:

$('#example').tooltip(options)

标记

工具提示所需的标记只是您希望获得工具提示的HTML元素上的数据属性和标题。 生成的工具提示标记相当简单，但它确实需要一个位置（默认情况下，由插件设置为顶部）。

使工具提示适用于键盘和辅助技术用户

您应该只向HTML元素添加工具提示，这些元素通常是键盘可聚焦和交互式的（例如链接或表单控件）。 虽然可以通过添加tabindex =“0”属性使任意HTML元素（例如<span>s）变得可聚焦，但这将为键盘用户的非交互元素添加可能令人烦恼且令人困惑的制表位。 此外，目前大多数辅助技术都没有公布这种情况下的工具提示。

<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

各个工具提示的数据属性

如上所述，可以通过使用数据属性来指定单个工具提示的选项。

如果您想查看更多示例和属性，请查看官方 Bootstrap Documentation.