ツールチップを加える - Bootstrapのチュートリアル

このレッスンではボタンやリンクに ツールチップを加えてみます。 今ドキュメントには ボタンとそれから一文、 Bootstrap についての 説明がありますけど まずはボタンの方に ツールチップを加えたいと思います。 ボタンはここにあるんですけど 現在は button で type が button そして class には btn の byn-primary ということになっていますけど このタグの中に書き加えていきますが 見やすい様にちょっと改行しておきましょう。 ここに加えていきます。 data- という属性なんですけど まず toggle です。 toggle で tooltip という風にいれます。 それからツールチップで 表示したいもの、 これは title にいれます。 ではここは日本語で 「ツールチップ」という風にしましょう。 そして実はこれ jQuery の JacaScript コードで出します。 といっても 公式サイトからコピーしてくればいいので 公式サイトの方に移りましょう。 Bootstrap の公式サイト、 getbootstrap.com ですね。 Documentation で検索して tooltip という風に入れると Tooltips という 項目がありますので ここでスクロールをしまして、 もう１回ぐらい ここにありますね。 ちょっとまた上にスクロール し直しますけど この３行です。 これを普通にコピーしてしまいます。 ［コピー］して Script 要素にペーストするんですが jQuery のコードですから jQuery を読み込んだ あとでないといけません。 ですから body の 閉じタグの所に入れましょうか。 ここで script で タグは閉じます。 そして先ほどコピーした コードを ［ペースト］ですね。 一応インデントを 整えておきます。 これでいいでしょう。 ファイルを保存して ブラウザーで確かめましょう、 ボタンにマウスポインタを重ねると ボタンの上に 「ツールチップ」と でてきます。 「ツールチップ」を出す位置は 調整できます。 ではこのボタンまた コピーして使いましょう。 ［コピー］して あと３つ ［ペースト］ ［ペースト］ ちょっと取り消しましょう。 位置調整してから コピーします。 この前にまた、 data…