使用 TailwindCss 和 AlpineJs 的悬停提示

在本教程中，我们将使用TailwindCss和AlpineJs创建了一个Tooltip，并将其逻辑封装到Laravel组件中。教程结束时，我们将拥有如下所示的Tooltip。

在开始学习之前，请确保您已经安装了一个Laravel项目，并且包含了AlpineJs和TailwindCss。我建议在Laravel项目中安装Breeze，因为这将自动安装这两个依赖项。

我们的目标是创建一个帮助图标，当用户将鼠标悬停在该图标上时，将显示帮助文本作为提示。

因此，我们首先需要一个帮助图标。TailwindCss建议使用HeroIcons，所以我们选择了一个图标，一个带圆圈的问号，其SVG如下。

<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>

我们将将其封装在一个span标签中，如下所示

<span class="ml-2 h-5 w-5 cursor-pointer">
  <!-- SVG Goes Here -->
</span>

在这里，我们使用了以下TailwindCss类：

<ul> <li>ml-2: 左外边距为0.5rem</li> <li>h-5, w-5: 高度 & 宽度为1.25rem</li> <li>cursor-pointer: 鼠标悬停时改变光标样式为指针</li> </ul>

您可以按照需求修改这些类。

现在，让我们还包括一个div，该div将显示在span内部的Tooltip。

<span class="ml-2 h-5 w-5 cursor-pointer">
  <!-- SVG Goes Here -->
  <div>
     This is the Tooltip.
  </div>
</span>

我们需要在最初隐藏这个div，并且只在用户将鼠标移到SVG上时显示它。我们将使用AlpineJs来实现这一点。

首先，我们将定义AlpineJs数据，它将包含一个属性，我们最初将其设置为false。

x-data="{ tooltip: false }"

然后我们将使用x-on指令来在mouseover时将此属性设置为true，以及在mouseleave时将其设置为false。

x-on:mouseover="tooltip = true" x-on:mouseleave="tooltip = false"

最后我们将使用这个属性，通过使用 x-show 指令来显示和隐藏 div。

x-show="tooltip" 

我们现在写的代码如下所示

<span 
    x-data="{ tooltip: false }" 
    x-on:mouseover="tooltip = true" 
    x-on:mouseleave="tooltip = false"
    class="ml-2 h-5 w-5 cursor-pointer">
  <!-- SVG Goes Here -->
  <div x-show="tooltip">
     This is the Tooltip.
  </div>
</span>

我们的提示符现在应该可以正常工作了。然而，我们可以通过将以下 TailwindCss 类应用到 div 上进一步提高它。

  <div x-show="tooltip" 
      class="text-sm text-white absolute bg-blue-400 rounded-lg p-2
 transform -translate-y-8 translate-x-8">
     This is the Tooltip.
  </div>

我们已应用的以下 TailwindCss 类：

<ul> <li>text-sm: 将提示文本缩小</li> <li>text-white: 将文本颜色应用于提示，使其变为白色</li> <li>absolute: 给它一个绝对位置，使其不会干扰周围的元素</li> <li>bg-blue-400: 蓝色阴影的背景颜色</li> <li>rounded-lg: 应用圆角 برجسته</li> <li>p-2: 边距 0.5rem</li> <li>transform: 以应用以下转换类的方式实现转换</li> <li>-translate-y-8 translate-x-8: 使文本在x轴和y轴上移动</li> <li>/ul>

在这个阶段，你应该得到与教程开头图片中所示相同的输出。我们还可以在一个 Blade 文件中包含多个提示。

但是，让我们将所有逻辑移动到一个组件中。我们将在 resources/views/components/tooltip.blade.php 创建文件并将所有代码移动到这个文件中。

<span 
    x-data="{ tooltip: false }" 
    x-on:mouseover="tooltip = true" 
    x-on:mouseleave="tooltip = false"
    class="ml-2 h-5 w-5 cursor-pointer">
  <!-- SVG Goes Here -->
  <div x-show="tooltip"
    class="text-sm text-white absolute bg-blue-400 rounded-lg 
    p-2 transform -translate-y-8 translate-x-8"
  >
     {{$slot}}
  </div>
</span>

请注意，我们已经用 $slot 替换了提示文本。现在，我们可以在 Blade 文件中调用这个组件并传递类似于下面的提示文本

<x-tooltip>This is the Tooltip Text</x-tooltip>

上述代码展示了如何在 Blade 文件中使用提示符是多么简单。如果我们想更改提示符的行为，我们只需在组件文件中进行更改。

希望你喜欢这篇文章。