专业编程基础技术教程

网站首页 > 基础教程 正文

bootstrap的提示插件tooltip的使用

ccvgpt 2025-01-01 18:26:16 基础教程 2 ℃

提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。效果如下:

bootstrap的提示插件tooltip的使用

您可以有以下两种方式添加提示工具(tooltip):

1、通过data属性来调用;

如需添加一个提示工具(tooltip),只需向一个a标签添加 data-toggle="tooltip" 即可。a标签的 title 即为提示工具(tooltip)的文本。默认情况下,提示在顶部。

例如:

<a href="#" data-toggle="tooltip" title="我是提示" data-placement="top">请提示出现在我的上面</a>

当鼠标在“请提示在我的上面” 上悬停,就会出现我是提示的注解。

  • data-placement 有四个值:分别是top bottom left right。就是提示显示的位置;top是默认值。

  • title里可以包含html标签;例如:title="<h2>'我是h2大小的提示 </h2>"

2、通过JavaScript来调用;

  • $('#identifier').tooltip(options)

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

    提示工具(Tooltip)插件它不是纯 CSS 插件。如使用该插件,您必须使用 jquery 激活它。使用上面的脚本来启用。

这就是tooltip的使用方法,一般情况下,我们都使用第一种方法来进行使用。

Tags:

最近发表
标签列表