自定义Tooltip文字提示

原创于 2024-11-06 10:39:57 发布

· 295 阅读

0 ·

版权

文章标签：

#前端 #javascript #开发语言

1.定义代码结构

<div class="content-text position-relative">
                                <div  class="item-tooltip">{{item.name}} <div  class="inner"></div></div>
                                <div class="model-title">
                                    <a href="javascript:;" style="color: #333333; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" @mouseover="showTooltip(index)" @mouseleave="hideTooltip">
                                    {{item.name}}
                                    </a>
                                </div>
                            </div>

2.css

 .item-tooltip {
            position: absolute;
            z-index: 1000;
            font-size: 14px;
            bottom: 30px;
            transform: translateX(-50%);
            left: 50%;
            background: #303133;
            padding: 5px 5px;
            color: #ffffff;
            border-radius: 10px;
            text-align: center;
        }
        .item-tooltip .inner{
            background-color: #303133;
            width: 10px;
            height: 10px;
            border: 1px solid #303133;
            position: absolute;
            bottom: -5px;
            left: calc(50% - 5px);
            transform: rotate(225deg);
            border-right: 0px;
            border-bottom: 0px;
        }

3.js

 tooltipVisible: -1 //定义data数据控制哪个展示


            showTooltip(index) {
                this.tooltipVisible = index;
            },
            hideTooltip() {
                this.tooltipVisible = -1;
            }
          }