使用 JavaScript 和 jQuery 添加工具提示
借助 jQuery，可以非常容易地创建高度可定制的工具提示框，用于装饰您的页面元素。
引言
其思路是将一个函数附加到您想要使用工具提示装饰的元素的 mouseover 和 mouseout 事件。 附加到 mouseover 事件的函数将创建一个 <div> 元素，该元素将托管工具提示消息并将其添加到 <body>，而附加到 mouseout 事件的函数将删除该 <div>。 这两个函数将被打包在另一个函数中。 这就是您需要用来添加工具提示的唯一函数。
当然，我们的 <div> 工具提示将具有一些可定制的属性。 在我将要展示的示例中，我决定将这些属性的列表限制为 5 个项目
- 要显示的消息
- 淡出时间
- 背景颜色
- 宽度
- 边框样式
我将首先向您展示该函数的全部代码，然后我将评论我认为有趣的部分。
function AddTooltip(objectId,
message,
fadeAfterMs,
cssBackcolor,
cssWidth,
cssBorder) {
//distance of the tooltip from the cursor
const LEFT_FROM_CURSOR = 30;
const TOP_FROM_CURSOR = 5;
//constants used in the recalculation of left and top
const DISTANCE_FROM_RIGHT_BORDER = 20;
const ADDITIONAL_DISTANCE_FROM_BOTTOM = 50;
const BOX_HEIGHT = 50;
//at the minimum we need the element id and the message
if (objectId && message) {
var $tooltip;
$('#' + objectId).on('mouseover', function (e) {
let left = e.originalEvent.pageX + LEFT_FROM_CURSOR;
let top = e.originalEvent.pageY + TOP_FROM_CURSOR;
//console.log(top);
//console.log(VisibleHeight());
//console.log(window.pageYOffset);
//assigning values from parameters or default values
let width = !cssWidth ? '200px' : cssWidth;
let border = !cssBorder ? '1px solid black' : cssBorder;
let backcolor = !cssBackcolor ? 'aquamarine' : cssBackcolor;
//should the tooltip go over the window border on the right....
if (left + parseInt(width)- window.pageXOffset > VisibleWidth()) {
left = VisibleWidth() - parseInt(width) - DISTANCE_FROM_RIGHT_BORDER;
}
////should the tooltip go over the window border on the bottom....
if (top + BOX_HEIGHT - window.pageYOffset> VisibleHeight() ) {
top = top - BOX_HEIGHT;
}
//console.log(top + BOX_HEIGHT + ' ' + VisibleHeight());
//composing the html code for the tooltip div
let s = '<div style="' +
'border:' + border + ';' +
'padding-left:10px;' +
'padding-top:5px;' +
'padding-bottom:5px;' +
'z-index:1;' +
'opacity:0.7;'+
'border-radius:5px;' +
'font-size:small; ' +
'position: absolute;' +
'left:' + left.toString() + 'px;top:' + top.toString() + 'px;' +
'width:' + width + ";" +
'background-color: ' + backcolor + ';' +
'display:inline-block;">' +
message +
'</div>';
//tooltip appended to the body
$tooltip = $(s).appendTo('body');
$tooltip.attr('id', 'ttp-' + objectId);
//fading functionality set here
if (fadeAfterMs && fadeAfterMs > 0) {
setTimeout(Fade, fadeAfterMs);
}
});
$('#' + objectId).on('mouseout', function (e) {
$($tooltip).remove();
});
}
function Fade() {
$($tooltip).fadeOut(2000, function () {
$($tooltip).remove();
});
}
function VisibleWidth() {
return window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth
|| 0;
}
function VisibleHeight() {
return window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight
|| 0;
}
}
让我们从函数声明开始
function AddTooltip(objectId,
message,
fadeAfterMs,
cssBackcolor,
cssWidth,
cssBorder)
正如预期的那样，该函数被称为 AddTooltip 并且具有 6 个参数。 第一个是您要将工具提示框附加到的 HTML 元素的 id，第二个是要显示的消息。 前两个参数是强制性的。 如果没有元素或消息，那么显示工具提示实际上毫无意义！ 最后四个参数是可选的。 如果未设置，则工具提示框的对应属性将采用函数内部设置的默认值。
fadeAfterMs 参数的类型为 Integer，并指定工具提示框显示后到淡出之间经过的毫秒数。
其他可选参数的类型为 String，需要指定相关属性的 CSS 值。 例如，参数 cssWidth 的值为 '300px'。
mouseover 函数
如果将强制性参数传递给该函数，则会创建一个新变量来保存对工具提示框的引用 ($tooltip)，然后将一个函数附加到 mouseover 事件。
在此函数内部，将计算工具提示框的初始位置，并且某些变量将采用默认值或通过 AddTooltip 参数传递的值。
if (objectId && message) {
var $tooltip;
$('#' + objectId).on('mouseover', function (e) {
let left = e.originalEvent.pageX + LEFT_FROM_CURSOR;
let top = e.originalEvent.pageY + TOP_FROM_CURSOR;
//assigning values from parameters or default values
let width = !cssWidth ? '200px' : cssWidth;
let border = !cssBorder ? '1px solid black' : cssBorder;
let backcolor = !cssBackcolor ? 'aquamarine' : cssBackcolor;
然后，将包含 <div> 的 HTML 代码的 string 组成并附加到 <body> 标签。 最后，设置淡出效果
let s = '<div ' +
'style="' +
'border:' + border + ';' +
'padding-left:10px;' +
.
.
'display:inline-block;">' +
message +
'</div>';
$tooltip = $(s).appendTo('body');
$tooltip.attr('id', 'ttp-' + objectId);
if (fadeAfterMs && fadeAfterMs > 0) {
setTimeout(Fade, fadeAfterMs);
}
这几乎是 mouseover 函数所做的全部事情。 如果添加了工具提示的元素太靠近窗口的右侧，则工具提示框可能会超出窗口并被切断
我不打算详细解释此计算的工作原理。 只要说它涉及到页面滚动的测量和页面的可见 width 即可
//should the tooltip go over the window border on the right....
if (left + parseInt(width)- window.pageXOffset > VisibleWidth()) {
left = VisibleWidth() - parseInt(width) - DISTANCE_FROM_RIGHT_BORDER;
}
还必须重新计算 top，但不幸的是，我们不知道 box 的 height。 有很多方法可以找到它，但为了保持简短，我决定假设 box 的 height 永远不会超过 50 像素。 我认为这并不是太大的限制，因为该框应该可视化一个提示，而不是一本小说！ 并且它有助于简化 top 的计算
////should the tooltip go over the window border on the bottom....
if (top + BOX_HEIGHT - window.pageYOffset> VisibleHeight() ) {
top = top - BOX_HEIGHT;
}
mouseout 函数
这很简单：它只是从 <body> 中删除工具提示
$('#' + objectId).on('mouseout', function (e) {
$($tooltip).remove();
});
如何使用 AddTooltip 函数
只需指定元素 id 和消息！
$(document).ready(function () {
AddTooltip('a-help', 'Do something good....help other people')
AddTooltip('txt-phone', 'In order to avoid phone pranks,
do not give your real number!', 1500, 'pink', '300px')
});
这就是它的样子
祝您编码愉快！
历史
- 2019 年 2 月 1 日：初始版本