网站首页 > 技术文章 正文
提示工具(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-07-02 ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
- 2025-07-02 用 Bootstrap4 制作响应式网页二(导航菜单)
- 2025-07-02 bootstrap 的滚动监听(监听滚动条滚动事件)
- 2025-07-02 BootstrapBlazor :使用 .NET 生成交互式客户端 Web UI 的框架
- 2025-07-02 Bootstrap技巧之跟随导航(bootstrap官网入口制作一个导航栏)
- 2025-07-02 bootstrap的tab标签页的使用(bootstrap标签页垂直方向)
- 2025-07-02 原生ajax和django结合bootstrap-table,jquery与ajax的使用
- 2025-07-02 新书速览|Bootstrap 5从入门到精通(视频教学版)
- 2025-07-02 基于bootstrap实现的在线商城前端整站源码,页面齐全
- 2025-07-02 day58:bootstrap框架(bootstrap框架怎么用)
你 发表评论:
欢迎- 585℃几个Oracle空值处理函数 oracle处理null值的函数
- 580℃Oracle分析函数之Lag和Lead()使用
- 566℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 564℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 559℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 552℃【数据统计分析】详解Oracle分组函数之CUBE
- 539℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 533℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)