10

私は角ブートストラップを使用して、私のツールチップを持つようにしたいんだが、デスクトップ上の「ホバー」を使用してトリガしていることができ、モバイルデバイス上で「クリック」ツールチップの外側をクリックするとツールチップが閉じることがあります。私は「outsideClickは」しかし、これは完全にそうでもホバーは動作しないツールチップを壊し、今サポートトリガー(https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs)であるため、=「outsideClickを置く」ツールチップ・トリガに設定します。角度ブートストラップツールチップにトリガー

<span class="glyphicon glyphicon-info-sign" tooltip-trigger="hover outsideClick" uib-tooltip="Tooltip text here"></span> 

これらの作業をまとめる方法はありますか?

私はちょうどツールチップ・トリガを使用する場合は=それはまともだが、携帯電話で私はそれを閉じるためにページ上の他の場所をクリックすることができるという対、再びアイテムをクリックすると、ツールチップを閉じることができ「をクリックしてくださいホバー」。

答えて

2

tooltip-trigger="mouseenter outsideClick"を試しましたか? hoverはドキュメントに記載されていないようです。

1

ネイティブブートストラップライブラリを使用する可能性がある場合は、あなたが探しているものをデフォルトでサポートしています。

私が作成したjsfiddle実証し、この

HTML(期待通りに働いてtootlips見るためにあなたのモバイルデバイスで表示してください):

<div class="row"> 
    <div class="col-md-12"> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> 
    </div> 
</div> 

JS:

$(function() { 
    $('[data-toggle="tooltip"]').tooltip() 
}); 

あなたをそれを読むことができるhere、サイドノートとして、あなたは手動でツールチップを有効にする必要があります

パフォーマンス上の理由から

、ツールチップとポップオーバーデータAPIは、オプトインしている、あなたがそれらを自分で初期化しなければならないという意味。ページ上のすべてのツールチップを初期化する

一つの方法は、彼らのdata-toggle属性によってそれらを選択するために、次のようになります。

1

私は、あなたが探していることはtooltip-trigger="hover focus"だと思い、focusは、outsideClickとして動作します次のクリック時にツールチップを閉じます。私はこれを個人的に使っており、モバイルとデスクトップの両方で素晴らしい作品です。

それは実際にhover focusデフォルトはそうあなたも手動で追加する必要はありません。

関連する問題