优秀的编程知识分享平台

网站首页 > 技术文章 正文

bootstrap的提示插件tooltip的使用

nanyue 2025-02-09 13:35:27 技术文章 3 ℃

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

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

1、通过data属性来调用;

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

例如:

请提示出现在我的上面

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

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

  • title里可以包含html标签;例如:title="

    '我是h2大小的提示

    "

2、通过JavaScript来调用;

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

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

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

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

Tags:

最近发表
标签列表