文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Bootstrap工具提示插件怎么使用

2023-07-04 09:26

关注

本文小编为大家详细介绍“Bootstrap工具提示插件怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“Bootstrap工具提示插件怎么使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

一、用法
工具提示(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(); });

二、选项
有一些选项是通过 Bootstrap 数据 API(Bootstrap Data API)添加或通过 JavaScript 调用的。下表列出了这些选项:

Bootstrap工具提示插件怎么使用

三.工具提示

//基本实例<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>//JS 部分需要声明$('#section').tooltip();

工具提示有很多属性来配置提示的显示,具体如下:

Bootstrap工具提示插件怎么使用

<a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符" data-animation="false" data-html="true" data-placement="auto" data-selector="a[rel=tooltip]" data-trigger="click" data-delay="500" data-template="<b>123</b>">HTML5</a>

JavaScript 方式直接去掉前面的 data 即可。包括:animation、html、placement、selector、original-title、title、trigger、delay、container 和 template 等属性。

//JavaScript 方式$('#section a').tooltip({ delay : {  show : 500,  hide : 100, }, container : 'body'});

JavaScript 有四个方法:show、hide、toggle 和 destroy 四种。

//显示$('#section a').tooltip('show');//隐藏$('#section a').tooltip('hide');//反转显示和隐藏$('#section a').tooltip('toggle');//隐藏并销毁$('#section a').tooltip('destroy');

Tooltip 中事件有四种。

Bootstrap工具提示插件怎么使用

//事件,其他雷同

$('#select a').on('show.bs.tooltip', function() { alert('调用 show 时触发!');});

读到这里,这篇“Bootstrap工具提示插件怎么使用”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯