如何使用 Material Design 的工具提示？-JavaScript中文网-JavaScript教程资源分享门户

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

基础

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

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

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

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

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

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

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

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

<a href="#" class="btn tooltipped" data-tooltip="这是一个按钮" data-position-tooltip="bottom">按钮</a>

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

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

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

<a href="#" class="btn" id="my-trigger">触发元素</a>
<div id="my-tooltip" class="card">提示框</div>

$(document).ready(function(){
  $('#my-trigger').tooltip({
    tooltip: '#my-tooltip'
  });
});

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

<a href="#" class="btn" id="my-trigger" data-tooltip="tooltipContent()">触发元素</a>

function tooltipContent(){
  if (someCondition){
    return '这是一个提示框';
  } else {
    return '这是另一个提示框';
  }
}

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

.tooltip-content {
  background-color: blue;
}

.tooltip-content .tooltipped {
  color: orange;
}

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

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/671c655a9babaf620fb097b7