在jQuery的帮助下，创建高度可自定义的工具提示框非常容易，可用于装饰页面元素。

介绍

我们的想法是将一个函数附加到您想要使用工具提示进行装饰的元素mouseover和mouseout事件中。附加到mouseover事件的函数将创建一个<div>元素，该元素将托管工具提示消息并将被添加到<body>，而附加到mouseout事件的函数将删除<div>。这两个函数都将打包在另一个函数中。这是您需要用来添加工具提示的唯一功能。

当然，我们的<div>工具提示会有一些可自定义的属性。在我将要展示的示例中，我决定将这些属性的列表限制为5项：

要显示的消息
消退时间
背景颜色
宽度
边框风格

我将首先向您展示该函数的整个代码，然后我将评论我认为有趣的部分。

function AddTooltip(objectId,message,fadeAfterMs,cssBackcolor,cssWidth,cssBorder) {//distance of the tooltip from the cursorconst LEFT_FROM_CURSOR = 30;const TOP_FROM_CURSOR = 5;//constants used in the recalculation of left and topconst 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 messageif (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 valueslet 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 divlet 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 hereif (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 valueslet 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')});

这是它的样子：

原文地址：https://www.codeproject.com/Articles/1276002/Add-tooltips-with-JavaScript-and-jQuery

使用JavaScript和jQuery添加工具提示相关推荐

Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
jquery 添加 padding_【开发小技巧】11—如何使用JavaScript / jQuery为网站创夜间/高亮模式？...
英文 | https://www.geeksforgeeks.org/how-to-create-dark-light-mode-for-website-using-javascript-jquery ...
20 个免费的 jQuery 的工具提示插件：
本文介绍 20 个免费的 jQuery 的工具提示插件: TipTip ( Demo | Download ) TipTip是一个非常轻量级的Tooltip jQuery插件.没有使用图片完全通过CS ...
JavaScript和jQuery实战手册(原书第2版)
<JavaScript和jQuery实战手册(原书第2版)> 基本信息原书名:avaScript & jQuery: The Missing Manual,Second Edit ...
jQuery添加DOM节点常用的5种方法
一.内部插入(前插入.后插入): <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术非常多,样例非常多.仅仅好慢慢学,慢慢实践!!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQ ...
JavaScript那些事儿（1）：对比JavaScript和jQuery的Dom操作
正在着手看<javascript权威指南>,整理点儿笔记,也算是督促自己学习,每天看一点,特立此贴,希望自己能坚持下去. 对比:用javascript和jQuery分别判断某元素是否存在, ...
JavaScript和jQuery的学习
还有12天就要回学校了,我的假期计划还能实现吗?在这12天里,需要把JavaScript和jQuery学完.我知道这两个技术对于前端网页开发非常重要.前期把HTML和CSS学完了,学的不是特别深,只是 ...
如何使用JavaScript或JQuery检测一个URL文件是否存在?
如何使用JavaScript或JQuery检测一个URL文件是否存在? How do I check if file exists in jQuery or JavaScript? 问题: 如何检查服 ...

使用JavaScript和jQuery添加工具提示

介绍

Mouseover函数

Mouseout函数

如何使用AddTooltip函数

使用JavaScript和jQuery添加工具提示相关推荐

最新文章

热门文章