Angular Material 2 - 工具提示未正确显示答案

【问题标题】：Angular Material 2 - Tooltips not shown properlyAngular Material 2 - 工具提示未正确显示
【发布时间】：2017-03-03 22:09:42
【问题描述】：

我将 Angular2 与 Angular Material 2 一起使用。

在材料 2 中，您有 tooltips。但是，我无法正确显示工具提示。如果您将鼠标悬停在触发器上，则会显示工具提示，但会立即消失，然后再次显示，依此类推。

详情请参阅Plunker。我想实现official documentation 中的行为。

问题在于 CSS（特别是 display 值）。但是，我想保留 plunker 中提供的 CSS 值。

CSS

.input-group {
    display: table;
}

.input-group-addon {
    border: 1px solid #000000;
    width: 1%;
    white-space: nowrap;
    display: table-cell;
}

.form-control {
    border: 1px solid #000000;
    font-size: 14;
    width: 100%;
}

HTML

<div class="input-group">

  <span class="input-group-addon">de</span>

  <input class="form-control"/>

  <span class="input-group-addon"
    [mdTooltip]="'A long text is required in de'"
    mdTooltipPosition="before">
    Hover me!
  </span>

</div>

你有什么想法吗？这是我的代码或 Material 代码中的错误吗？

【问题讨论】：

它似乎在当前版本的 Angular Material 2 中工作

标签： css angular twitter-bootstrap-3 angular-material angular-material2

【解决方案1】：

**使用下面的脚本这最终应该可以工作::.

<span class="input-group-addon" md-tooltip="tooltip" 
title="'A long text is required in de'"
mdTooltipPosition="before">

【讨论】：

【解决方案2】：

必须安装 HammerJS 才能正确显示工具提示。确保 HammerJS 已安装在您的 package.json 中。

npm i -S hammerjs

然后它必须被导入到你的 app.module.ts 中。只需将包导入 app.module 即可。

import 'hammerjs';

我不需要将它包含在 app.module 的导入数组中。这适用于我使用 Angular Material 2.0.0-beta.2 和hammerjs 2.0.8。

【讨论】：

感谢您的回答。不幸的是，这对我不起作用。行为仍然相同。
您使用的是预建主题吗？在我添加预建或自定义主题之前，我的没有工作。
我正在使用预构建主题。