css+js实现文字悬浮tooltip气泡弹出显示效果代码-html代码-BFW代码库

css+js实现文字悬浮tooltip气泡弹出显示效果代码

代码语言：html

所属分类：弹出层

代码描述：css+js实现文字悬浮tooltip气泡弹出显示效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .container{margin:150px auto}
        *{box-sizing:border-box}body{font-family:'Inter',sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;overflow:hidden;margin:0}p{font-size:1.25rem}
    </style>
</head>

<body>
    <div class="container">
        <p>
            <mg-tooltip alert_decoration='' alert_hl_color='' alert_txt_color='' alert_weight='' alert_opacity='' message_bg='' message_txt_color='' message_weight='' tooltip_shadow='' click_toggle=''><span slot="alert">悬停试试 </span><span slot="message">一款非常实用的js小插件，自定义文本提示小气泡。 </span></mg-tooltip>
        </p>
    </div>
    <script>
        const template = document.createElement('template')

template.innerHTML = `
    <style>
        :host {
            --msg-bg: white;
        }
        .open {
            cursor: pointer;
            opacity: .8;
            font-weight: bolder;
        }
        .tooltip-container {
            display: inline-block;
            position: relative;
            z-index: 10;
        }
        .message-container {
            position: absolute;
            bottom: 125%;
            z-index: 20;
            width: 300px;
            background: var(--msg-bg);
            box-shadow: 5px 5px 10px rgba(0,0,0,.1);
            font-size: .8em;
            font-weight: bold;
            border-radius: 0.5em;
            padding: 1em;
            transform: scale(0);
            transform-origin: bottom left;
            transition: transform 0.5s cubic-bezier(0.860, 0.000, 0.070, 1.000);
        }
        .message-container:before {
            border: solid;
            border-color: var(--msg-bg) transparent;
            border-width: 15px 8px 0 8px;
            content: "";
            left: 5px;
            bottom: -10px;
            position: absolute;
            transform: rotate(20deg)
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 15;
            display: none;
        }
    </style>
    <div class="tooltip-container">
        <div class="open alert-container">
            <slot name="alert" />
        </div>

        <div class="message-container">
            <slot name="message" />
        </div>
        <div class="overlay"></div>
    </div>
`

class MgTooltip extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({mode: 'open'})
        this.shadowRoot.appendChild(template.content.cloneNode(true))
    }

    tooltip(expandState) {
        const tooltip = this.shadowRoot.querySelector('.message-container')
        const open = this.shadowRoot.querySelector('.open')

        if(expandState == true.........完整代码请登录后点击上方下载按钮下载查看