3

クラス「ツールチップ」をオブジェクトに適用すると消えるという問題がありますが、これはブートストラップを使用している場合にのみ発生し、誰かが回避策を知っているかどうか疑問に思っています. 両方の例を示します。

これはブートストラップなしです：

$(document).ready(function() {
  $('.tooltip').tooltipster();
});
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/tooltipster.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.min.js"></script>

<i class="fa fa-facebook-square fa-2x tooltip" title="Working!"></i>

ブートストラップを使用したスニペットは次のとおりです。

$(document).ready(function() {
  $('.tooltip').tooltipster();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>    
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/tooltipster.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.min.js"></script>

<i class="fa fa-facebook-square tooltip" title="Working!"></i>

アイコンが非表示になっている 2 番目のアイコンに移動して左上にカーソルを合わせると、ツールチップが表示されますが、アイコンが非表示になっていると役に立ちません。

4

2 に答える 2

1

Matt が上で述べたように、外部ツールチップとデフォルトの Bootstrap ツールチップの間に競合があります。コメントで述べたように、代わりに Bootstrap で利用可能な inbuild ツールチップを使用することをお勧めします。

Bootstrap ツールチップの公式ドキュメントは次のとおりです: http://getbootstrap.com/javascript/#tooltips

于 2015-03-26T00:21:40.130 に答える