Home > Article > Web Front-end > javascript-a prompt box will be displayed when the mouse moves or stays on the page

javascript-a prompt box will be displayed when the mouse moves or stays on the page

php是最好的语言Original: 2018-08-06 10:19:243123browse

The prompt box will be displayed when the mouse moves to the hidden content, and it will still be displayed when the mouse stays on the prompt box. The prompt box disappears when the mouse leaves the prompt box and the content is hidden.

When used, the table box has a fixed width, and excess information exceeding the width will be displayed with ellipses.

Set the table box CSS to

table-layout: fixed;
word-break: break-all;

Excess characters are displayed as ellipses:

.hideMore {
    width:60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Instructions for the method used when displaying the prompt box:

1 The delegate() method adds one or more event handlers to the specified element (a child element of the selected element) and specifies the function to run when these events occur.

Event handlers using the delegate() method apply to the current or future elements (such as new elements created by scripts).

2. The setTimeout() method is used to call a function or calculate an expression after a specified number of milliseconds.

<body>
<table>
//表格内多余的seat将被用省略号来显示
//鼠标移动到这里将显示提示框提示内容(可以自定义)
<td class="hideMore"><span alert-content="$!{policy.seat}">$!{policy.seat}</span>
<table>
<body>

javascript代码：
  
$(function () {

var tableShow = null;
            var tipShow = null;
            var delayTime = 200;
             //离开至表格隐藏tip
            $("body").delegate("span", "mouseleave", function () {
                tipShow = setTimeout(function () {
                    $(&#39;[data-ui="alert-layer"]&#39;).remove()
                }, delayTime)
            });
                    //移动至表格显示tip
                    $("body").delegate("span", "mouseover", function () {
                        var seat = $(this);
                        tableShow = setTimeout(function () {
                            showTip(seat)
                        }, delayTime)
                    });
            //在tip上继续显示
            $("body").delegate(&#39;[data-ui="alert-layer"]&#39;, "mouseover", function () {
                clearTimeout(tipShow)
            });
                    //离开tip隐藏
                    $("body").delegate(&#39;[data-ui="alert-layer"]&#39;, "mouseleave", function () {
                        tipShow = setTimeout(function () {
                            $(&#39;[data-ui="alert-layer"]&#39;).remove()
                        }, delayTime)
                    });
            //予以显示
            function showTip(seat) {
                var content = seat.attr("alert-content");
                var position = {
                    top: seat.offset().top + seat.height(),
                    left: seat.offset().left-3,
                    index: 9999
                };
                var content = "<p data-ui=\"alert-layer\" class=\"more-seat\"><p class=\"bg\"></p>"+content+"</p>";
                $(&#39;[data-ui="alert-layer"]&#39;).length || ($("body").append(content),
                        $(&#39;[data-ui="alert-layer"]&#39;).css(position))
            }
})

//显示 提示框p的CSS样式
.more-seat {
        white-space: nowrap;
        color: #566c7e;
        position: absolute;
        z-index: 99999;
        background: #f8fcff;
        line-height: normal;
        border: 1px solid #c3d5e3;
        padding: 14px 16px;
        cursor: default;
        font-family: verdana;
    }

Usage example:

javascript-a prompt box will be displayed when the mouse moves or stays on the page

The technology and methods used are not very advanced, so the experts can leave suggestions.

js mouse movement to display the effect code of the image in the title_image special effects

Hover the mouse for three seconds Then automatically display the large image js code

The above is the detailed content of javascript-a prompt box will be displayed when the mouse moves or stays on the page. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css Delegate JS 事件 table

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Systematic explanation of Javascript asynchronous programming knowledge pointsNext article：Systematic explanation of Javascript asynchronous programming knowledge points

See more

javascript-a prompt box will be displayed when the mouse moves or stays on the page

Related articles