悬停后保持 Material Design lite 工具提示可见答案

【问题标题】：Keep material design lite tooltip visible after hover悬停后保持 Material Design lite 工具提示可见
【发布时间】：2018-08-24 12:26:17
【问题描述】：

鼠标悬停在 Material Design lite 工具提示上是否可以保持打开状态？例如，用户可以点击其中的链接。

<div id="myTooltip" class="icon material-icons">info</div>
<div class="mdl-tooltip mdl-tooltip--large" for="myTooltip">
  <a href="#">Here</a> is the further information.
</div>

【问题讨论】：

标签： html tooltip material-design-lite

【解决方案1】：

您可以在 mouseleave 上阻止工具提示被隐藏，然后根据您想要的任何其他操作处理隐藏工具提示。

例如：

const tt1 = document.querySelector('#tt1');

tt1.addEventListener('mouseleave', (event) => {
  event.stopImmediatePropagation();
  // handle tooltip hide
});

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Design Lite Tooltip</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  </head>

  <body>

    <!-- Large Tooltip -->
    <div id="tt1" class="icon material-icons">info</div>
    <div class="mdl-tooltip mdl-tooltip--large" for="tt1">
      <a href="#">Link</a><span> followed by text</span>
    </div>

    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>

  </body>

</html>

【讨论】：

完美运行！我应该如何在角度组件中做到这一点？
我还没有使用过 Angular（还）。我建议使用 Angular 进行最小设置（例如这个），然后在遇到障碍时使用该代码发布另一个问题。