2

を示していません。しかし、私はツールチップを適切に表示することができません。トリガーの上にカーソルを合わせると、ツールチップが表示されますが、直ちに表示されず、再び表示されます。角度資料2 - ツールチップ、私はあなたが<a href="https://material.angular.io/components/component/tooltip" rel="nofollow noreferrer">tooltips</a>を持っている資料2で2</p> <p>角度の材料と一緒にAngular2を使用し、適切に

詳細は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%; 
} 

<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> 

HTMLあなたが任意のアイデアを持っていますか?これは私のコードやMaterialのコードのバグですか?

+0

現行バージョンの角材2で動作しているようです。 –

答えて

1

**このスクリプトを使用すると、最終的には動作します。

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

ツールチップが正しく表示されるように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を使用して私のために働いた。

+0

あなたの答えをありがとう。残念ながら、これは私のためには機能しません。その振る舞いはまだ同じです。 –

+0

あなたはあらかじめ作成されたテーマを使用していますか?マインは、あらかじめ作成されたテーマやカスタムテーマを追加するまで機能しませんでした。 – natep

+0

私はプレビルドテーマを使用しています。 –

関連する問題