使用JavaScript和jQuery添加工具提示

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

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

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 = '
' +
                message +
                '
';

            //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'。

如果将强制参数传递给函数，则会创建一个将保存对工具提示框的引用的新变量（$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;

然后组成包含

let s = '
' +
    message +
    '
';

$tooltip = $(s).appendTo('body');
$tooltip.attr('id', 'ttp-' + objectId);

if (fadeAfterMs && fadeAfterMs > 0) {
    setTimeout(Fade, fadeAfterMs);
}

//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;
}

$('#' + objectId).on('mouseout', function (e) {
    $($tooltip).remove();
});

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