Угловой Материал 2 - Всплывающие не показана правильно

Question

Я использую Angular2 вместе с угловым Материалом 2.

В материале 2 у вас есть tooltips. Однако я не могу правильно показать всплывающие подсказки. Если вы наводите курсор на триггер, всплывающие подсказки отображаются, но сразу исчезают, отображаются снова и так далее.

Подробнее см. Plunker. Я хочу достичь поведения в official documentation.

Проблема заключается в CSS (особенно значения display). Тем не менее, я хочу сохранить значения 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> 

Есть ли у вас какие-либо идеи? Это ошибка в моем коде или в коде материала?

Answer 1

** используйте скрипт, как показано ниже, это должно работать в конце концов ::.

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

Answer 2

HammerJS должен быть установлен для правильной отображения всплывающей подсказки. Убедитесь, что HammerJS установлен в вашем пакете. 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.