ToolTip是一条信息丰富且简短的消息，仅当用户与应用程序UI上的元素进行交互时，才会出现。作为一个常用的功能，它旨在为特定部分提供提示或其他描述性信息。对于交互式元素（例如按钮，尤其是图标按钮），使用工具提示可以改善组件的可访问性以及键盘和鼠标导航上的用户体验。虽然title仅出现在鼠标悬停上，但工具提示是提供有关键盘焦点上元素的重要信息的绝佳解决方案。

有两种方法可以为VUE中的特定元素创建工具提示：作为带有插槽的包装组件或目标组件上的自定义指令。

本文将探索第一种方法 - 使用VUE和CSS构建工具提示组件。是的，您不需要组件库来进行工具提示，因为它只会采用几行代码。

目录

• Prerequisites
• Building a koude1 component with a slot
  • Showing the tooltip on hover with CSS
  • Showing the tooltip on focus with pseudo-element koude2
• Position the tooltip with CSS and props
  • Positioning the tooltip to the top
  • Positioning the tooltip to the bottom
  • Positioning the tooltip to the left
  • Positioning the tooltip to the right
• Adding an arrow to the tooltip with pseudo-element koude3
• Announce the tooltip content to screen readers
• Resources
• Summary

先决条件

您需要有一个工作的VUE应用程序（请参阅the official guide for setting up a new Vue project with Vite）和对VUE和CSS的基本理解。

您的VUE项目准备就绪后，我们可以创建我们的工具提示组件。

构建具有插槽的Tooltip组件

我们的Tooltip包含一个包装元素，其中包括以下子元素：

• 通过默认slot注入的任何子组件6
• 文本字段充当注入的组件的工具提示。该组件接收此文本字段的内容，以使用text Props显示。

基于这些要求，我们将在我们的Tooltip.vue文件中添加以下代码：

<template>
    <div class="tooltip-wrapper">
        <slot />
        <span class="tooltip__text">{{ text }}</span>
    </div>
</template>
<script>
const props = defineProps({
    text: {
        type: String,
        required: true
    }
})
</script>

在上面的代码中，我们将带有tooltip-wrapper类的div用作：

• 默认的slot作为组件占位符，
• 一个span元素显示工具提示的text值，并具有类名称tooltip__text。

和在<script>中，我们使用defineProps方法将text props定义为required字符串。

太好了。现在，我们为工具提示组件实现了基本结构。然后，我们可以在任何VUE组件中导入并使用Tooltip，如下所示：

<template>
    <Tooltip text="This is a tooltip">
        <button>Click me</button>
    </Tooltip>
</template>
<script setup>
import Tooltip from './Tooltip.vue'
</script>

然而，此时Tooltip不起作用，并且将始终显示目标元素下一步的工具提示，如下面的屏幕截图：

要使组件充分发挥功能，我们需要添加CSS样式并控制工具提示的位置和可见性，我们将在下一节中探索。

用CSS显示悬停的工具提示

默认情况下，当与元素没有相互作用时，工具提示应在UI上不可见。为此，我们将visibility设置为hidden和opacity to 0进行.tooltip__text类，并添加transition效果以使opacity平滑过渡。我们还将添加其他CSS属性，为工具提示提供一个不错的布局，并将包装器元素（.tooltip-wrapper）与display: inline-block设置为具有与其嵌套元素相同的宽度，如下所示：
：

.tooltip__text {
    visibility: hidden;
    opacity: 0;
    transition: opacity 1s;

    color: #ffffff;
    text-align: center;
    padding: 5px 0;
    border-radius: 2px;
    min-width: 120px;
    background: #5e5d5d;
}

.tooltip-wrapper {
    display: inline-block;
}

当用户徘徊在目标元素上时，我们希望显示工具提示。我们可以通过将opacity属性的值更改为1和visibility的值来做到这一点，例如.tooltip-wrapper在.tooltip-wrapper在:hover上时，就像在以下代码中一样：

.tooltip-wrapper:hover .tooltip__text{
    visibility: visible;
    opacity: 1;
}

当用户在下面的屏幕截图中徘徊在目标元素上时，您可以看到该工具提示如何具有平滑的过渡效果：

由于我们将工具提示放在目标button元素下方，因此它将在不可见时留出空间，从而导致潜在的UI错误。我们可以通过使用position: absolute从页面布局的通常流中删除工具提示来避免此问题，从而删除与之生成的空间。我们还需要将z-index设置为1，以确保该工具提示在可见时始终重叠在其他元素之上。

.tooltip__text {
    /**... */
    position: absolute;
    z-index: 1;
}

我们必须为.tooltip-wrapper设置position: relative，以确保将工具提示相对于包装元素定位，如下：

.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

现在，浏览器将正确显示该工具提示的下一步目标元素，如以下屏幕截图：

我们成功地创建了一个工具提示组件，显示了悬停在悬停的工具提示。但是，如果您使用键盘导航页面，则会注意到使用Tab键关注目标元素时，该工具提示是不可见的。因此，对于目标元素除了工具提示之外没有其他描述性标签的方案，它将引起视觉可访问性问题。将:focus伪元素添加到.tooltip-wrapper选择器将无济于事，因为此处的集中元素是目标元素-button，而不是其父级 - div。另外，VUE不支持从插槽中自动将诸如class之类的属性传递到目标组件，从而使组成正确的CSS选择器变得更加困难。

在这种情况下，我们使用::slotted()伪元素，我们将讨论下一步。

使用伪元素:slotted()显示焦点的工具提示2

:slotted() pseudo-element是一个CSS选择器，它允许我们选择传递到组件的默认插槽中的元素。它接受一个简单的组件选择器（无空间）作为其参数。对于我们的情况，我们可以使用Selector *选择目标元素，因此:slotted(*)。

:slotted(*) {
}

然后，我们可以将:focus伪元素添加到:slotted(*)选择器中，并使用相邻的兄弟姐妹组合器（+）选择目标元素的立即兄弟姐妹，即.tooltip__text，并更改其opacity，以显示工具图，如IN in in in into以下代码：

:slotted(*):focus + .tooltip__text {
    visibility: visible;
    opacity: 1;
}

请注意，*将不用担心目标中的嵌套元素，因为:slotted()只能选择插槽的第一级子女。

现在，当使用键盘导航专注于目标button元素时，我们可以按预期看到该工具提示：

我们现在有一个功能齐全的工具提示组件，该组件显示了悬停和焦点上的工具提示。但是，浏览器将始终在目标元素下方显示工具提示，这不是那么可定制。以下部分将探讨如何使用道具和目标元素的位置定位工具提示。

用CS和道具定位工具提示

工具提示通常可以在一个元素周围出现四个位置：顶部，右，底部和左。我们首先在style部分中添加四个不同的CSS类选择器，每个COUDE62的位置都有不同的位置，如以下代码所示：

.tooltip--top {
}

.tooltip--bottom {
}

.tooltip--left {
}

.tooltip--right {
}

我们定义了一个新的prop -position，其默认值为bottom作为默认工具提示的位置。我们还添加了一个新的计算属性-tooltipClasses，以根据position Prop的值返回一组相关的类名称，如以下代码：

import { computed } from 'vue';

const props = defineProps({
    /**... */
    position: {
        type: String,
        default: 'bottom'
    },
})

const tooltipClasses = computed(() => ({
    'tooltip__text': true,
    [`tooltip--${props.position}`]: true
}))

然后，我们将计算的tooltipClasses绑定到.tooltip__text元素的class属性：

<span :class="tooltipClasses">{{ text }}</span>

现在，我们可以使用position prop将工具提示放置在left上，如以下代码：

<Tooltip text="This is a tooltip" position="left">
    <button>Click me</button>
</Tooltip>

vue将生成正确的类名，用于工具提示元素的tooltip--left tooltip__text。

我们剩下的就是为每个职位添加相关的CSS规则。在本文中，我们使用相应的CSS逻辑属性来帮助基于目标元素的写作方向和文本方向和所需位置来控制工具提示的逻辑和物理位置，如下表所示：

以下代码块显示每个位置的CSS规则。

将工具提示定位到顶部

我们将为tooltip--top类选择器实施CSS规则：

.tooltip--top {
    inset-block-end: 120%;
    inset-inline-start: 50%;
    margin-inline-start: -60px;
}

在这里，我们使用inset-block-end: 120%和inset-inline-start: 50%分别从其相对容器-.tooltip-wrapper（与目标元素具有相同偏移量的左边缘）放置上面的工具提示20%和50%。我们还将margin-inline-start属性设置为-60px，以将工具提示60px移至左侧，这将水平居中，如以下屏幕截图所示：

接下来，我们将实施底部位置的规则。

将工具提示定位到底部

与最高位置类似，我们保持左边缘偏移和边距，并使用inset-block-start: 120%的tooltip--bottom类选择器将工具提示20%放置在其相对容器下方，如下：

.tooltip--bottom {
    inset-block-start: 120%;
    inset-inline-start: 50%;
    margin-inline-start: -60px;
}

和工具提示将从右侧出现，如下所示：

接下来，我们将实施左位（或内线启动位置）的规则。

将工具提示放在左侧

对于左侧位置，我们使用inset-inline-end: 110%将工具提示10%从其相对容器的右>边缘取代，同时将两个使用inset-block-end: 0%对齐的底部边缘，如以下代码：
所示：

.tooltip--left {
    inset-block-end: 0%;
    inset-inline-end: 110%;
}

.tooltip--right {
    inset-block-end: 0%;
    inset-inline-start: 110%;
}

.tooltip__text::after {
    content: " ";
    position: absolute;
    border-width: 5px;
    border-style: solid;
}

.tooltip--left::after {
    inset-block-start: 50%;
    inset-inline-start: 100%;
    border-color: transparent transparent transparent #5e5d5d;
}

.tooltip--right::after {
    inset-block-start: 50%;
    inset-inline-end: 100%;
    border-color: transparent #5e5d5d transparent transparent;
}

.tooltip--top::after {
    inset-block-start: 100%;
    inset-inline-start: 50%;
    border-color: #5e5d5d transparent transparent  transparent;
}

.tooltip--bottom::after {
    inset-block-end: 100%;
    inset-inline-start: 50%;
    border-color: transparent transparent #5e5d5d transparent;
}

<Tooltip text="I'm the top tooltip" position="top" :tooltip-id="tooltipsIds.top">
 <button :aria-describedby="tooltipsIds.top">Top</button>
</Tooltip>

<span :class="tooltipClasses" role="tooltip" :id="tooltipId">{{ text }}</span>

<span :class="tooltipClasses" role="tooltip" :id="tooltipId" inert>{{ text }}</span>