4

Twitter Boostrap の一部としてバンドルされている Twipsy プラグインのアイデアは気に入っていますが、正しく動作していないようです。

ここに jsfiddle があります: http://jsfiddle.net/burlesona/DUPyR/

ご覧のとおり、ドキュメントで規定されているデフォルト設定を使用すると、ツールチップ付きのアンカーにカーソルを合わせるとツールチップが表示されますが、マウスを離しても消えません。

ツールチップの外観は CSS に依存していることは理解していますが、Twitter のドキュメント ページでは、ツールチップはスクリプトによって DOM に追加および削除されていますが、この例と私自身のローカル テストでは、スクリプトはチップを追加しますが、決して削除しません。それ。

スクリプトへのリンクは次のとおりです: http://twitter.github.com/bootstrap/1.3.0/bootstrap-twipsy.js

アイデア/提案はありますか？なぜこれがそのままの動作をしているのか、私はかなり混乱しています。

または、クリーンで軽量な jQuery ツールチップ プラグインのより良い提案があれば、私に知らせてください。

ありがとう！

4

4 に答える 4

15

ご指摘のとおり、CSS ファイルをリソースに追加していないため、コードが機能していません。

作業例: http://jsfiddle.net/DUPyR/1/

そのCSSファイルには、と呼ばれる2つのクラスがあるためです

.fade {
    -moz-transition: opacity 0.15s linear 0s;
    opacity: 0;
}
.fade.in {
    opacity: 1;
}

マウスを内側に移動すると、ツール ヒントが本文の先頭に追加され、ツールclass="twipsy fade in"ヒントinの非表示機能で削除されて非表示になります ( opacity=0)。

最小限の CSS での作業例: http://jsfiddle.net/DUPyR/3/

元の例のように DOM から要素を削除していないことに注意してください。CSS をさらに調査することで、そこに光が当たることは間違いありません。

お気に入りのツールチップ プラグインを聞かれたら、Jörn Zaefferer の軽量ツールチップ プラグイン (4kb 圧縮) を使用します。それは私の目的によく合っています。

リンクはこちら: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

于 2011-10-03T06:18:16.180 に答える
0

または、次のように「ツールチップ」を使用できます。

<div rel="tooltip" href="#" data-toggle="tooltip" data-placement="top" data-original-title="hi">I'm here</div>

<script type='text/javascript'> $(window).load(function(){ $('div[rel=tooltip]').tooltip(); });</script>

rel: http://twitter.github.com/bootstrap/javascript.html#tooltips

于 2013-03-06T08:21:46.673 に答える
0

ええ、現在は別のプラグインとして削除されているようです (執筆時点では 2.3.1) が、メインの bootstrap.js ファイルに付属するToolTip プラグインがあるので、それで十分です。

于 2013-04-03T03:03:49.543 に答える
0

twipsy が機能しない理由はわかりませんが、ほろ酔いは機能します: http://jsfiddle.net/X6H2Y/

Tipsy は、Twitter によって次のように変更されたオリジナルの jQuery プラグインです。

(Twipsy は) Jason Frame によって書かれた優れた jQuery.tipsy プラグインに基づいています。twipsy は更新されたバージョンで、画像に依存せず、アニメーションに css3 を使用し、タイトルの保存にデータ属性を使用します!

于 2011-10-03T05:52:57.310 に答える