jQuery Tooltip工具提示框的用法（附带实例）

在 jQuery UI 中，工具提示框（Tooltip）替代了原生的工具提示框。jQuery UI 允许工具提示框主题化，也允许对它们进行各种自定义。另外，工具提示框显示的不仅仅是标题以外的内容，还包括内联的脚注或者通过 AJAX 检索的内容。

工具提示框默认使用一个渐变的动画来显示和隐藏自身，这种外观与简单地切换可见度相比更具灵活性，这一功能可以通过 show 和 hide 选项进行定制。

工具提示框使用 jQuery UI CSS 框架来定义外观样式。如果需要使用工具提示框指定的样式，则可以使用如下 CSS class 名称：

ui-tooltip：工具提示框的外层容器；
ui-tooltip-content：工具提示框的内容。

【实例】制作一个虚拟的视频播放器，该视频播放器带有“喜欢”、“添加到”、“分享”等常用按钮，每个按钮都带有一个自定义样式的工具提示框。程序开发步骤如下：

新建一个 index.html 文件。
复制 jQuery UI 文件夹 jquery-ui-1.13.2.custom，和 index.html 放置在一起。
使用 VS Code 打开 index.html 文件，在 index.html 文件中编写如下代码，实现在视频播放器的“喜欢”、“添加到”、“分享”等按钮上显示自定义样式的工具提示框功能：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.13.2.custom/external/jquery.js"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
<title>工具提示框（Tooltip）的使用</title>
<style>
.player {
    width: 450px;
    height: 300px;
    border: 2px groove gray;
    text-align: center;
    line-height: 300px;
}
.ui-tooltip {
    border: 1px solid white;
    background: rgba(20, 20, 20, 1);
    color: white;
}
.set {
    display: inline-block;
}
</style>
<script>
$(function() {
    $( "button" ).each(function() {    // 遍历<button>元素
        var button = $(this).button({
            icons: {
                primary: $(this).data("icon")    // 带图标
            },
            text: $(this).attr("title")?$( this ).attr("title"):""    // 按钮的title 属性存在，提示信息为 title 属性值；否则提示信息为空
        });
    });
    $( document ).tooltip({
        show: {
            duration: "fast"    // 快速显示提示信息
        }
    });
});
</script>
</head>
<body>
<div class="player" style="background-image:url(back.jpg)"></div>
<div class="tools">
    <span class="set">
        <button data-icon="ui-icon-circle-arrow-n" title="我喜欢这个视频">喜欢</button>
        <button data-icon="ui-icon-circle-arrow-s">我不喜欢这个视频</button>
    </span>
    <div class="set">
        <button data-icon="ui-icon-circle-plus" title="添加到播放列表">添加到</button>
        <button class="menu" data-icon="ui-icon-triangle-1-s">添加到收藏夹</button>
    </div>
    <button title="分享这个视频">分享</button>
    <button data-icon="ui-icon-alert">标记为不恰当</button>
</div>
</body>
</html>

使用 Chrome 浏览器运行 index.html 文件，将鼠标指针悬停在网页下方的某一个按钮上，即可显示对应的提示信息，效果如下图所示。

jQuery Tooltip工具提示框的用法（附带实例）

相关文章