1

基本的に、誰かが最初にページに到達したときにツールチップを表示したいのですが、そのページ (またはページ上の他のツールチップ) にカーソルを合わせると、デフォルトのホバー動作に戻ります。これが発生すると、うまく機能しないバグがあるようです。現在、$('div#id').tooltip('show') コマンドを使用してツールチップをロードしていますが、デフォルトのホバー動作に戻す方法がわかりません。さらに悪いことに、特定の div で「表示」と「非表示」を切り替えるホバー関数を作成すると、バグが発生します。

この動作は、この Web サイトhttp://rework.herokuapp.com/organizationsの「仕組み」セクションで確認できます。

HTMLコードは次のとおりです。

<div class="row center works">

   <div class="of center"><img alt="Step 1" class="center step init" data-placement="bottom" id="step1" rel="tooltip" src="/assets/works/step1.png" data-original-title="People who are driven to find meaningful work apply to the ReWork Talent Pool."></div>

   <div class="of center"><img alt="Step 2" class="center step" data-placement="bottom" id="step2" rel="tooltip" src="/assets/works/step2.png" data-original-title="ReWork screens applicants for skills, experience, values, and accomplishments."></div>

   <div class="of center"><img alt="Step 3" class="center step" data-placement="bottom" id="step3" rel="tooltip" src="/assets/works/step3.png" data-original-title="You engage ReWork for a role you need filled, and ReWork hand-selects qualified candidates from the talent pool."></div>

   <div class="of center"><img alt="Step 4" class="center step" data-placement="bottom" id="step4" rel="tooltip" src="/assets/works/step4.png" data-original-title="You choose which candidates you want to meet, and make an offer if there’s a good fit."></div>

   <div class="of center"><img alt="Step 5" class="center step" data-placement="bottom" id="step5" rel="tooltip" src="/assets/works/step5.png" style="padding-bottom:13px" data-original-title="ReWork collects a fee when a successful hire is made."></div>

</div>

jQuery:

    $('img#step1').load(function(){
      $('#step1').tooltip('show');
    });

    $('.step').hover(function() {
        $('#step1').removeClass('init');
        if ($(this).attr('id') != 'step1') {
            $('#step1').tooltip('hide');
        } else {
            $('#step1').tooltip('show');
        }

このバグは、Web サイトhttp://rework.herokuapp.com/organizationsの「how it works」セクションで再び確認できます。

4

2 に答える 2

7

次のようなことができます。

$('.works .step').tooltip().eq(0).tooltip('show').tooltip('disable').one('mouseout', function() {
  $(this).tooltip('enable');
});​​​​​​​

デモ: http://jsfiddle.net/AtvBN/9/ ​​(ページの別の部分用ですが、コンセプトは同じです)。

于 2012-09-13T17:23:54.283 に答える
0

「.in」クラスは、ツールチップのタイトルを表示する責任があります。あなたがしたい場合は、

ユーザーが最初にページにアクセスしたときにすべてのツールチップを表示します。

次に、すべてのツールチップ要素にクラスを追加するだけです。このような：

$('#step1').tooltip('show');//Initialize tooltip in any way you desire
$('[data-toggle="tooltip"]').find(".tooltip.fade").addClass("in");

あなたがしたい場合に備えて

ユーザーが最初にページにアクセスしたときにデフォルトで表示されるツールチップをすべて削除し、ツールチップのデフォルトの動作を設定します。

このようにすることもできます

$('#step1').tooltip('show');//Initialize tooltip in any way you desire
$('[data-toggle="tooltip"]').find(".tooltip.fade").removeClass("in");

このように私はうまくいっていますが、あなたにもうまくいくことを願っています。

于 2015-09-28T06:58:16.047 に答える