tippy.js 自定义提示插件，包括样式与动画

第一步引入bfwone，加载依赖项popper|tippy

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=popper|tippy&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>

    <script type="text/javascript">
        bready(function() {
            tippy.setDefaults({
                animation: 'fade',
                arrow: true,
            })
            tippy('button');
        });
    </script>
</head>
<body style="padding:40px;">
    <button data-tippy-content="你好">文字</button>

    <button
        data-tippy-content="你好,动画自定义"
        data-tippy-animation="scale"
        data-tippy-duration="0"
        data-tippy-arrow="true"
        data-tippy-delay="[800, 200]"
        >
        Text
    </button>
</body>
</html>

官方网址https://atomiks.github.io/tippyjs/

tippy.js 自定义提示插件样式与动画

立即下载tippy.js 查看所有js插件

网友评论0