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

Question

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

在 Material 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">