js跟随多行文本提示

最新推荐文章于 2024-05-07 14:50:31 发布

小疯子青

最新推荐文章于 2024-05-07 14:50:31 发布

阅读量280

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/a1773570500/article/details/119858415

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这个博客展示了如何用HTML和JavaScript创建一个带有动态提示信息的元素。当鼠标悬停在特定div上时，会出现一个浮动的提示框，包含表格格式的内容，并能随鼠标移动而移动。代码中包括了样式定义和事件监听处理，实现了简单的交互功能。

摘要由CSDN通过智能技术生成

实现效果如下：
在这里插入图片描述
程序代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 100px;
            line-height: 100px;
            border: 1px solid #000;
            font-size: 22px;
            text-align: center;
        }
    </style>
</head>
<body>
<div data-tooltip="<table><tr><td>提示的文字</td><td>test</td></tr><tr><td>问题描述</td><td>80</td></tr></table>" >把鼠标移过来</div>
<script type="text/javascript">
    (function toolTip() {

        createStyle();

        let tooltipElem;
        document.onmouseover = function (e) {
            var target = e.target;
            var toolHtml = target.dataset.tooltip;
            if (!toolHtml) {
                return;
            }
            tooltipElem = document.createElement('div');
            tooltipElem.className = "tooltip";
            tooltipElem.innerHTML = toolHtml;
            document.body.append(tooltipElem);

            document.onmousemove = function (e) {
                tooltipElem.style.left = e.clientX + 'px';
                tooltipElem.style.top = e.clientY + 'px';
            }

        };

        document.onmouseout = function () {
            if (tooltipElem) {
                tooltipElem.remove();
                tooltipElem = null;
            }
            document.onmousemove = null;
        }
    })()


    // 创建提示文本的样式
    function createStyle() {
        var styleEle = document.createElement('style');
        styleEle.type = 'text/css';
        styleEle.innerHTML =
            `.tooltip {
        position: fixed;
        margin: 10px;
        padding: 10px 20px;
        border: 1px solid #b3c9ce;
        border-radius: 4px;
        text-align: left;
        font: italic 16px/1.3 arial, sans-serif;
        color: #333;
        background: #eee;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
        z-index: 999999999;
    }`;
        document.head.appendChild(styleEle);
    }
</script>
</body>
</html>

小疯子青

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js跟随多行文本提示

实现效果如下：程序代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> d
复制链接

扫一扫

专栏目录