2

ブートストラップ ツールチップを追加しましたが、ツールチップを表示するために画像にカーソルを合わせると、次のように、ツールチップを実際に表示せずに画像が点滅することがあります。

http://i.imgur.com/QLZJN7v.gif

ここに私のHTMLがあります：

<div class="up"></div>
<div class="down"></div>

JQuery:

<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script type="text/javascript">
  $('.up').tooltip({title: '<b>Up</b>', delay: { show: 500, hide: 0 }, trigger: 'hover', html: true});
  $('.down').tooltip({title: '<b>Down</b>', delay: { show: 500, hide: 0 }, trigger: 'hover', html: true});
</script>

どうしたの？

4

2 に答える 2

2

私は実際にこの問題を抱えていました。

私にとっての問題は、ツールチップの矢印が実際の画像に重なっていて、ユーザーがマウスオーバーしてツールチップの表示をトリガーする必要があるため、点滅していたことです。

私の解決策は、パディング付きの css クラスを追加し、その css を画像に追加することでした。これにより、画像の周りにパディングがあり、ツールチップが画像に重ならなくなります。

これが私のcssクラスです：

/* this is the padding applied to icon hyper-links to prevent the tooltip flicker issue */
.no_flicker_padding {
    padding-top: 7px;
}

これが私のhtmlコードです（ちらつきを防ぐためにハイパーリンクにcssクラスが追加されています）：

<a id="id_form_display_toggle" href="javascript:toggleDiv('id_toggle_professional_development_form_details');" rel="tooltip" title="{% trans 'Click to toggle the form details.' %}" trigger="hover" class="no_flicker_padding">

    <i id="id_professional_development_form_toggle" class="fa fa-angle-double-up icon_size26"></i>

    <i id="id_professional_development_form_toggle" class="fa fa-angle-double-down icon_size26"></i>

</a>

これは、ツールチップの配置が「上」になることを前提としています。

これが誰かを助けることができることを願っています。

于 2015-10-01T09:40:55.983 に答える
0

次のように、JS コードを document.ready にラップしてみます。

$( document ).ready(function() {
$('.up').tooltip({title: '<b>Up</b>', delay: { show: 500, hide: 0 }, trigger: 'hover', html: true});
$('.down').tooltip({title: '<b>Down</b>', delay: { show: 500, hide: 0 }, trigger: 'hover', html:true});
});
于 2013-09-16T22:44:46.470 に答える