jQuery插件Tooltipster实现漂亮的工具提示_jquery
程序员文章站
2022-05-21 15:58:24
...
Tooltipster是一个轻量级的jQuery工具提示插件,可以快速的帮助你生成漂亮的工具提示。
This div has a tooltip when you hover over it!
1,加载jQuery和包括Tooltipster的插件文件
在您下载Tooltipster,移动tooltipster.css和jquery.tooltipster.min.js到根的CSS和JavaScript的目录。接下来,加载jQuery和包括您的标签里面Tooltipster的CSS和JavaScript文件:
... ...
2,设置你的HTML
为了Tooltipster工作,我们首先需要添加.tooltip类(或任何类别/选择意味着你想使用)的任何元素,我们希望有一个工具提示。接下来,我们将设置标题属性,无论我们希望我们的提示说。下面是一些例子:
添加工具提示的图像:
复制代码 代码如下:
添加工具提示已经有一个类的链接:
复制代码 代码如下:
添加工具提示一个div:
复制代码 代码如下:
This div has a tooltip when you hover over it!
3,激活Tooltipster
我们要做的最后一件事就是激活插件。要做到这一点,你的结束 head>前才添加下面的脚本标签(使用任何选择你想 - 在这种情况下,我们使用的是.tooltip类):
...
总结:
1.工具提示支持HTML标签内容
2.轻量级
3.灵活高效
4.样式定义简单,100%的CSS
5.支持3种主题
6.支持firefox,Chrome,IE7/8/9,Opera,Safari
以上所述就是本文的全部内容了,希望大家能够喜欢。
推荐阅读
-
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
-
jQuery插件实现的日历功能示例【附源码下载】
-
jQuery实现简单漂亮的Nav导航菜单效果
-
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
-
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
-
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
-
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
-
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
-
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】