71

私は Twitter Bootstrap を使用していますが、私はフロントエンド開発者ではありません! しかし、それはプロセスをほとんど - あえて言うなら - 楽しいものにしています!

ツールチップについて少し混乱しています。それらはドキュメントでカバーされていますが、Twitter はある程度の知識を前提としています。たとえば、次の JavaScript コードでツールチップをトリガーすると彼らは言います。

$('#example').tooltip(options)

それらのソースを調べた後、ツールチップを含むフィールドをクラスに配置し、次のコードを実行する必要があることに気付きました。

$('.tooltipclass').tooltip(options)

しかし、私の質問は、なぜ Twitter Bootstrap がそのようなクラスを提供しないのtooltipですか? より大きな構成を許可するだけですか？ツールチップ付きの個々の要素を に追加する方が良いですかtooltipclass、それとも周囲の領域を に追加する必要がありtooltipclassますか? .class名前識別子 ( ) の代わりにクラス識別子 ( ) を使用しても問題はあり#nameませんか?

4

7 に答える 7

107

あなたの質問は、ツールチップを設定するときに使用する適切なセレクターに要約されると思います。それに対する答えは、ほとんどあなたが望むものです。クラスを使用してツールチップをトリガーしたい場合は、それを行うことができます。たとえば、次のようにします。

<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a>

.link次に、次のようにツールチップとしてクラスが添付されたすべてのリンクをトリガーできます。

$('.link').tooltip()

ここで、ブートストラップ開発者がクラスを使用してツールチップをトリガーしなかった理由についての質問に答えるために、それは正確には必要ないためです。(私の個人的なお気に入り)rel属性。この属性を使用すると、次のようにrelプロパティが に設定されたすべてのリンクまたは要素をターゲットにすることができます。tooltip

$('[rel=tooltip]').tooltip()

リンクは次のようになります。

<a href="#" rel="tooltip" data-original-title="first tooltip">Hover me for a tooltip</a>

もちろん、コンテナ クラスまたは ID を使用して、特定のオプションで選択したり、残りのコンテンツから分離したい特定のコンテナ内のツールチップをターゲットにすることもできます。次のように使用できます。

$('#example').tooltip({
    selector: "a[rel=tooltip]"
})

このセレクターはrel、div の "内" 属性を持つすべてのツールチップをターゲットにします#example。このようにして、そのセクションだけに特別なスタイルやオプションを追加できます。つまり、有効なセレクターを使用してツールチップをターゲットにすることができ、それらをターゲットにするために追加のクラスでマークアップを汚す必要はありません。

于 2012-05-03T19:00:01.087 に答える
14

これを使用する最も簡単な方法は、

これをヘッダーに入れます：

<script>
    $(function ($) {
        $("a").tooltip()
    });
</script>

その後

<a href="#" rel="tooltip" data-placement="bottom" title="My Tooltip Text">
    My link text
</a>

したがって、ページ内の任意の場所にタグを付けてブートストラップ ツールチップを取得する場合は、その js コードを使用しますrel="tooltip"。

幸運を。

于 2012-12-27T07:57:53.633 に答える
3

JS と CSS ファイルを含めましたが、なぜ機能しないのか疑問に思っていました<head>。

<script>
jQuery(function ($) {
    $("a").tooltip()
});
</script>
于 2012-12-29T10:22:47.783 に答える
2

これは、これら (ツールチップなど) が jQuery プラグインであるためです。そして、はい、jQuery に関する基本的な知識を前提としています。少なくとも jQuery に関する基本的なチュートリアルを探すことをお勧めします。

どの要素にツールチップを表示するかを常に定義する必要があります。Bootstrap がクラスを提供する必要がある理由がわかりません。これらのクラスを定義するか、自分で定義します。おそらく、ブートストラップが自動的に何らかの魔法を行うことを望んでいたでしょうか? ただし、この魔法は多くの問題を引き起こす可能性があります (望ましくない副作用)。

この魔法は、 を書くだけで簡単に実現できます$(".myclass").tooltip()。このコード行は、あなたが望むことを正確に実行します。ツールチップを適用する必要がある要素に myclass クラスをアタッチするだけです。(DOM がロードされた後に必ずそのコード行を実行してください。以下を参照してください。)

$(document).ready(function() {
    $(".myclass").tooltip();
});

編集:明らかに、クラスのツールチップを使用することはできません(おそらく内部で使用されているためです!)。

私が含めることができるいくつかのクラスで指定したコードをブートストラップが実行しないのはなぜだろうと思っています。

あなたが望むことは、あなたが今しなければならないのとほぼ同じコードを生成します。しかし、彼らがそれをしなかった最大の理由は、それが多くのトラブルを引き起こすからです. ある人は、ID を持つ要素にそれを割り当てたいと考えています。他の人は、指定されたクラス名を持つ要素にそれを割り当てたいと思っています。また、他の人は、何らかの選択プロセスを通じて達成された特定の要素にそれを割り当てたいと考えています。これら 3 つのオプションは、jQuery によって既に提供されていますが、さらに複雑になります。多くのプラグインがあなたが望むことをするのを見たことがありません (それは不必要であり、実際にはコードを節約しません)。

于 2012-05-03T17:23:01.080 に答える