网站首页 > 基础教程 正文
提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(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的使用方法,一般情况下,我们都使用第一种方法来进行使用。
猜你喜欢
- 2025-01-01 WEB!读完本文让你豁然开朗!前端UI框架Bootstrap超级简单
- 2025-01-01 Python界面库NiceGui 组件体验 之 1
- 2025-01-01 Jest:给你的 React 项目加上单元测试
- 2025-01-01 Javaweb知识 day11 Bootstrap框架
- 2025-01-01 Python自动化运维系列:Django搭建个人博客之前端篇
- 2025-01-01 jq+ajax+bootstrap改了一个动态分页的表格
- 2025-01-01 jQuery slideToggle() 方法用法详解
- 01-09Oracle数据库面试题汇总
- 01-09Oracle AWR解析-Report Summary
- 01-09想要成为数据分析师,这些Excel必备知识点你得掌握
- 01-09java开发中常用Oracle函数实例总结比较,当真不少
- 01-09DriveWorks其实是这么回事
- 01-09EXCEL做数据分析,学会这些就入门了
- 01-09一场pandas与SQL的巅峰大战(六)
- 01-09Oracle数据库知识 day01 Oracle介绍和增删改查
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)