鼠标放上去提示信息插件

最新推荐文章于 2024-03-17 09:50:31 发布

白鹭凡

最新推荐文章于 2024-03-17 09:50:31 发布

阅读量729

点赞数

分类专栏： vue react

本文链接：https://blog.csdn.net/weixin_43506403/article/details/108550426

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

react

8 篇文章 0 订阅

订阅专栏

添加动画或交互性。在为常见的Popper元素（如工具提示，弹出框，下拉菜单等）创建抽象时可以使用

<!DOCTYPE html>
<html>

<head>
    <title>Popper Tutorial</title>
    <style>
        #tooltip {
            background: #333;
            color: white;
            font-weight: bold;
            padding: 4px 8px;
            font-size: 13px;
            border-radius: 4px;
            display: none;
        }
        
        #tooltip[data-show] {
            display: block;
        }
        
        #arrow,
        #arrow::before {
            position: absolute;
            width: 8px;
            height: 8px;
            z-index: -1;
        }
        
        #arrow::before {
            content: '';
            transform: rotate(45deg);
            background: #333;
        }
        
        #tooltip[data-popper-placement^='top']>#arrow {
            bottom: -4px;
        }
        
        #tooltip[data-popper-placement^='bottom']>#arrow {
            top: -4px;
        }
        
        #tooltip[data-popper-placement^='left']>#arrow {
            right: -4px;
        }
        
        #tooltip[data-popper-placement^='right']>#arrow {
            left: -4px;
        }
    </style>
</head>

<body>
    <button id="button" aria-describedby="tooltip">My button</button>
    <div id="tooltip" role="tooltip">
        My tooltip
        <div id="arrow" data-popper-arrow></div>
    </div>

    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script>
        const button = document.querySelector('#button');
        const tooltip = document.querySelector('#tooltip');

        let popperInstance = null;

        function create() {
            popperInstance = Popper.createPopper(button, tooltip, {
                modifiers: [{
                    name: 'offset',
                    options: {
                        offset: [0, 8],
                    },
                }, ],
            });
        }

        function destroy() {
            if (popperInstance) {
                popperInstance.destroy();
                popperInstance = null;
            }
        }

        function show() {
            tooltip.setAttribute('data-show', '');
            create();
        }

        function hide() {
            tooltip.removeAttribute('data-show');
            destroy();
        }

        const showEvents = ['mouseenter', 'focus'];
        const hideEvents = ['mouseleave', 'blur'];

        showEvents.forEach(event => {
            button.addEventListener(event, show);
        });

        hideEvents.forEach(event => {
            button.addEventListener(event, hide);
        });
    </script>
</body>

</html>

但是提示框的话Tippy更好用

<!DOCTYPE html>
<html>

<head>
    <title>My page</title>
</head>

<body>
    <button>Text</button>

    <!-- Very end of the body -->
    <script src="https://unpkg.com/popper.js@1"></script>
    <script src="https://unpkg.com/tippy.js@5"></script>
    <script>
        tippy('button', {
            content: 'tooltip'
        });
    </script>
</body>

</html>

白鹭凡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标放上去提示信息插件

添加动画或交互性。在为常见的Popper元素（如工具提示，弹出框，下拉菜单等）创建抽象时可以使用<!DOCTYPE html><html><head> <title>Popper Tutorial</title> <style> #tooltip { background: #333; color: white; font-w
复制链接

扫一扫

专栏目录