Tooltipster 基于 jQuery 和 HTML5 的工具提示插件

发布于 2019-08-08 字数 5466 浏览 903 评论 1

Tooltipster 是一个轻量级的 jQuery 插件,可轻松创建简洁清晰的 HTML5 工具提示,插件支持多个显示主题选择,多种可选的动画显示,能够兼容流行的浏览器。

Tooltipster 基于 jQuery 和 HTML5 的工具提示插件

Tooltipster 是一个强大的,灵活的 jQuery 插件使您能够轻松地创建语义,现代工具提示,增强 CSS 的编写能力,对于显示的能容,可以是纯文本的内容,也可以是图文排列的容器,甚至你可以通过 Ajax 动态加载弹出的内容。

兼容性

Tooltipster 能够兼容 Mozilla Firefox、Google Chrome、IE8+ 和其它浏览器,依赖于 jQuery 1.7+

使用方法

1、加载 jQuery 和 Tooltipster 插件文件

下载Tooltipster的插件文件,移动 tooltipster.css 和 jquery.tooltipster.min.js 到你的根目录的 CSS 和 JavaScript 文件夹中。接下来加载 jQuery 和包括 Tooltipster 的 CSS 和 JavaScript 文件的标签里面:

<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
<script src="http://cdn.uedsc.com/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery.tooltipster.min.js"></script>

2、设置你的 HTML 代码

为了 Tooltipster 能够正常的工作,我们首先需要添加 .tooltip 类(或其他类/意味着选择你想使用的)无论我们希望有一个工具提示。下一步,我们将设置这个元素的 title 属性,无论我们想要提示说。下面是几个例子:

添加工具提示到一个图片中

<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />

添加工具提示到一个链接中,链接中已有其它的样式

<a external-link="true" href="http://calebjacob.com" class="ketchup tooltip" title="This is my link's tooltip message!">Link</a>

给一个DIV容器添加工具提示

<div class="tooltip" title="This is my div's tooltip message!"> 
    This div has a tooltip when you hover over it!
</div>

3、调用Tooltipster方法

我们要做的最后一件事就是激活这个插件。为此,添加下面的脚本就在你关闭< /头>标签(使用任何选择你想在这种情况下,我们使用的.tooltip类):

<script>
    $(document).ready(function() {
        $('.tooltip').tooltipster();
    });
</script>

4、进一步的高级用法

在工具提示中使用HTML标签

Tooltipster允许你使用任何HTML标记你可以在你的工具提示。这意味着你可以插入图像和文本格式标签的东西。为了实现这一目标,推荐的方法是有一点不同:提供你的内容,而不是在标题属性脚本中的jQuery对象:

<head>
<script>
    $(document).ready(function() {
        $('#my-tooltip').tooltipster({
            content: $('<span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span>')
        });
    });
</script>
</head>
<body>
<div id="my-tooltip"> 
    This div has a tooltip with HTML when you hover over it!
</div>
</body>

另一个(不推荐)的方式实现这一目标是把编码的HTML标记直接在您的标题属性设置的contentAsHTML 选项为true。在所有的情况下,确保你有你想要的工具提示中显示内容的严格控制,多余的<script> 或者 <iframe>脚本标签例如会对你的网站的一个严重的安全问题。

<head>
<script>
    $(document).ready(function() {
        $('.tooltip').tooltipster({
            contentAsHTML: true
        });
    });
</script>
</head>
<body>
<div class="tooltip" title="&lt;img src=&quot;my-image.png&quot; /&gt; &lt;strong&gt; This text is in bold case !&lt;/strong&gt;"> 
    This div has a tooltip with HTML when you hover over it!
</div>
</body>

自定义工具提示样式

你Tooltipsters显示样式可以通过编辑/重写默认Tooltipster主题容易改变,位于css/tooltipster.css文件。

Tooltipster还包装有4种可供选择的主题选择。它们在本页的底部显示。使用一个主题,就包括CSS文件(位于css/themes文件夹)在你的页面并指定其名称在Tooltipster的设置:

$('.tooltip').tooltipster({
    theme: 'tooltipster-noir'
});

当然,你也有选择创造一个全新的主题,以满足您的需求。要做到这一点,开始与下面的例子,并添加您的天赋。当你完成了,包括指定您的主题,就像你的一个现有的主题Tooltipster。

/* This is how you would create a theme called "my-custom-theme": */
.my-custom-theme {
    border-radius: 5px; 
    border: 2px solid #000;
    background: #4c4c4c;
    color: #fff;
}
/* Use this next selector to style things like font-size and line-height: */
.my-custom-theme .tooltipster-content {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 16px;
    padding: 8px 10px;
}

使用自定义函数和选项

Tooltipster 是选择给你一个广泛的变量来调整你的提示,你的心的内容。要了解更多关于所有选项,阅读选项部分。这里有一些你可以玩的东西:

$('.tooltip').tooltipster({
   animation: 'fade',
   delay: 200,
   theme: 'tooltipster-default',
   touchDevices: false,
   trigger: 'hover'
});

相关链接

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

评论(1)

虐人心 2019-08-08 22:02:49 1 楼

插件不错,感谢分享!

0 0 回复