Question

我将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的代码中的错误吗？

Answer 1

**使用下面的脚本，这应该最终起作用::。

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

Answer 2

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

npm i -S hammerjs

然后必须将其导入app.module.ts。只需将包导入app.module就可以了。

import 'hammerjs';

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

角度材料2 - 工具提示未正确显示

2 个答案: