如何使用 Material Design 的工具提示?

工具提示是Web应用程序中必不可少的组件之一,它可以帮助用户更好的了解元素的功能与意义。Google的Material Design提供了一种漂亮且方便实现的工具提示组件。在这篇文章中,我们将介绍如何使用Material Design的工具提示。

基础

在使用Material Design的工具提示之前,我们需要了解一些基本的概念。

怎样触发工具提示?

工具提示默认情况下在鼠标悬浮于被提示元素上的时候触发。但是在触屏设备中,我们需要通过点击才能触发工具提示,这时需要通过添加data-touch="true"属性告诉工具提示组件要根据触摸事件来触发。

如何更改工具提示的文字?

工具提示默认显示的文本是通过在被提示元素的title属性中添加文本来实现的。但是在使用Material Design的工具提示中,我们应该使用data-tooltip属性来进行文本的设置。

如何触发工具提示后停留多长时间?

默认情况下,工具提示会在鼠标离开被提示元素后立即消失。但是你可以使用data-position-tooltip属性来设置它在消失前应该持续的时间。

如何更改工具提示的位置?

在默认情况下,工具提示会在被提示元素的左侧或者右侧显示。但是通过使用data-position-tooltip属性,我们可以更改它的位置。属性值可选项包括:leftrighttop以及bottom等。

如何使用工具提示?

在了解了工具提示的基础知识之后,我们来看看到底怎样使用它。

首先,我们需要引用Material Design库中的tooltip CSS。具体做法如下:

----- ---------------- ----------------------------------------------------------------------------------------

接下来,我们需要在需要使用工具提示的元素上添加data-tooltip属性,设置提示文本内容,以及data-position-tooltip属性,设置提示框的位置。此时,我们还需要添加class="tooltipped"来启用工具提示。最终的代码如下:

-- -------- ---------- ----------- --------------------- -------------------------------------

在你点击或者悬浮这个按钮时,都会出现一个带有“这是一个按钮”文字的工具提示框。

高级

在使用Material Design的工具提示时,你还可以实现以下高级功能:

自定义触发元素

有些时候,我们需要在一个元素上触发工具提示,但是又不想把提示框显示在这个元素上。这时,我们可以通过在触发元素上添加data-tooltip-id属性,并设置它的值为目标提示框的ID来实现。

-- -------- ----------- ------------------------
---- --------------- ----------------------
-----------------------------
  --------------------------
    -------- -------------
  ---
---

动态生成工具提示内容

有些时候,我们需要根据不同的条件动态地生成工具提示的内容。这时,我们可以通过在data-tooltip属性中设置一个函数来实现。代码如下:

-- -------- ----------- --------------- ----------------------------------------
-------- -----------------
  -- ----------------
    ------ ----------
  - ---- -
    ------ -----------
  -
-

自定义样式

有些时候,我们需要自定义工具提示框的样式。这时,我们可以通过自定义CSS来实现。在下面的代码中,我们使用了蓝色的背景色和橙色的文本颜色。

---------------- -
  ----------------- -----
-

---------------- ----------- -
  ------ -------
-

结论

Material Design提供了一个方便、漂亮且易于使用的工具提示组件。在本文中,我们学习了如何使用它的基本功能,并介绍了一些高级的用法。希望这篇文章能够对你有所帮助!

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671c655a9babaf620fb097b7