在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')
    
});

这是它的样子：

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

使用JavaScript和jQuery添加工具提示

介绍

Mouseover函数

Mouseout函数

如何使用AddTooltip函数

猜你喜欢