Hover-Tip 实现

经常使用于展现鼠标 hover 时的提示信息。

该组件的痛点在于：

• 纯CSS实现；
• 如何利用slot使组件易扩展，可以适应多种场景。

---

1. 实例

代码

<!-- 基础用法 -->
<fat-hovertip>
    <template slot="hover-part">
        <fat-button>组件</fat-button>
    </template>
    <template slot="tip-part">向下</template>
</fat-hovertip>
复制代码

实例地址：Hover-Tip 实例

代码地址：Github UI-Library

2. 原理

因为须要Hover-tip组件具有良好的扩展性较好，因此采用具名插槽来完成。

将该组件分为两个部分：

• hover-part：鼠标hover区域；
• tip-part：展现提示框的内容，具体以下图。

template的基本结构为

<div :class="['hover-tip', customClass]">
    <div class="hover-part"> <slot name="hover-part"> <!-- slot 的默认节点 --> <fat-icon name="help" size="18" /> </slot> </div> <div :class="[type, 'tip-part']"> <slot name="tip-part"></slot> <div class="arrow"></div> <div class="block"></div> </div> </div>
复制代码

template中具备两个具名插槽，其中<slot name="hover-part">为鼠标hover区域，能够为它设定默认值，以减小项目中代码的冗余。 <slot name="tip-part>表明提示框的内容区域，彻底自定义。

相关样式：tip-part的显示、tip-part的相对位置。

鼠标hover的时候，显示tip-part

.hover-tip {
    position: relative;
    display: inline-flex;
    .hover-part {
        display: flex;
        align-items: center;
    }
    // 初始的tip-part的display为none
    .tip-part {
        display: none;
        ...
    }
    // 当鼠标hover的时候hover-part区域的时候，显示tip-part
    .hover-part:hover + .tip-part {
        display: block;
    }
}
复制代码

tip-part的位置，以及上方居中为例top-center

$base-offset: 8px;

.top-center {
    margin-bottom: $base-offset;
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
}
复制代码

tip-part为绝对定位，其最近的非 static 定位祖先元素为hover-tip，相对于它偏移

/* <percentage>s of the width of the containing block */
left:50%;
/* <percentage>s of the height of the containing block */
bottom:100%
复制代码

left，bottom偏移的单位分别为包含块的宽和高，以后tip-part还须要向左偏移本身的50%，因此添加transform: translateX(-50%);，此时tip-part位于hover-tip上方的正中间，如示意图。

一样能够开发bottom-center，left-center，right-center。因为bottom-center，top-center有公共部分，可进一步聚合

.top-center,
.bottom-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
  .bottom-center {
    margin-top: $base-offset;
    top: 100%;
}
.top-center {
    margin-bottom: $base-offset;
    bottom: 100%;
}
复制代码

3. 使用

使用时，主要注意点是Hover-tip组件的两个具名插槽的使用。

<fat-hovertip>
    <!-- 对应slot name="hover-part" -->
    <template slot="hover-part">
        <fat-button>组件</fat-button>
    </template>
    <!-- 对应slot name="tip-part" -->
    <template slot="tip-part">向下</template>
</fat-hovertip>
复制代码

原创声明： 该文章为原创文章，转载请注明出处。