3

Twitter Bootstrap Twipsyを、ツールチップ内にリンクがあるホバリングツールチップとして使用しようとしています。

問題は、マウス カーソルが要素から離れると、ツールチップが消え、ユーザーがツールチップ内のリンクに到達できないことです (デモを見て、マウス カーソルを twipsy の黒いバブルに置くことができないことを確認してください。消えます）。

それを修正する方法はありますか？

ありがとう。

4

5 に答える 5

7

ブートストラップの作成者の 1 人が、これは不可能であると言ったとは信じがたいと思います。

テスト済みで機能している、coffeescriptとjqueryのソリューションは次のとおりです。

timer = null
el = null
el2 = null
$('[rel=twipsy]').live
  mouseenter: ->
    $('.twipsy').remove()
    $(this).twipsy('show')
  , mouseleave: ->
    el = $(this)
    timer = setTimeout((-> 
      el.twipsy('hide')
      $('body .twipsy:last-child').remove()
    ), 10)

$('.twipsy').live
  mouseenter: ->
    clearTimeout(timer)
    el2 = $(this)
    el2.css 'z-index', 1000 if el2.hasClass 'in'
  , mouseleave: ->
    timer = setTimeout((->
      el.twipsy('hide')
      el2.css 'z-index', 1
      $('body .twipsy:last-child').remove()
    ), 10)

大量のトラフィックが発生するアプリケーション、古いブラウザーや古いコンピューターで動作する必要があるアプリケーション、またはパフォーマンスに非常に依存するアプリケーションで作業している場合は、独自のソリューションをここに導入することを強くお勧めします。本当に素晴らしいアイデアです。ただし、小さい/通常の場合、これは問題なく機能します。特定の方法でホバーすると (まれではありますが) 発生する小さな非常に奇妙なバグが 1 つだけ見つかりました。オーバーラップの問題は、z-index 操作によって解決されます。

これがバニラ JavaScript である必要がある場合は、 http: //coffeescript.org/ の「try coffeescript」コンソールに貼り付けるだけで、コンパイルされます。

于 2012-01-03T15:59:41.763 に答える
2

ここで本当に必要だったのは、Twitter のポップオーバーだったと思います。

http://twitter.github.com/bootstrap/javascript.html#popovers

ツールチップは、いくつかの情報を表示するためだけに使用されます (そのため、ツールの「ヒント」と呼ばれます)。ユーザーとのやり取りが必要な場合は、ポップオーバーを使用する必要があります。

ここで、ツールチップのホバーを使用して同じことを達成できるのに、なぜユーザーのクリックを増やすのかというユーザビリティの点で疑問が生じるかもしれません。ただし、これにより、ユーザーは対話を行うために必要な時間を制御できます。私の意見では、ユーザビリティが向上します。2 秒以内 (設定されたタイムアウト) にリンクをクリックするようにユーザーに指示することはできません。使い勝手が良くない

この回答のために行われた作業に感謝します。回答は正しいですが、解決策はありません。

私が自分自身を明確にしたことを願っています。

于 2013-02-06T11:05:30.747 に答える
1

twipsy のトリガーを「手動」に設定し、「mouseenter」などのイベントを、タイマーを使用して閉じる前に数秒待機する関数にバインドできます。これを試して：

$(element).twipsy({
    trigger:'manual'
});
$(element).bind('mouseover',function(){
    $(element).twipsy('show');
    if ( $(element).data('timerIsGoing') !== true ) {
        $(element).data('timerIsGoing',true);
        setTimeout(function(){
            $(element).twipsy('hide');
        }, 2000);
    }
});

これにより、ユーザーは 2 秒間リンクをクリックすることができます。

また、近くに他のツールチップが重なっている可能性があるという問題に気付きました。マウスオーバー時他のすべてのアクティブなツールチップを非表示にするカスタムイベントをトリガーできます...ちょっと考えただけです

于 2011-12-02T15:57:58.577 に答える
1

上記の私のコメントを読んで、同じ問題を抱えていると思われる場合は、これがうまくいきました。

ドキュメントで実際に言及されている約300ミリ秒のアニメーションに遅延を設定できます。

于 2011-11-16T16:34:00.717 に答える
0

私は同じ問題を抱えていましたが、jQuery.js と Prototype.js の両方をロードしました。この問題は、prototype.js がロードされないようにすることで解決します。

于 2014-03-12T00:54:07.937 に答える