ポップオーバーを表示する - Bootstrapのチュートリアル

このレッスンではボタンをクリックした時に ポップオーバーを表示させます。 今画面にはボタンが一個あるんですが こちらですね。 このボタンにポップオーバーを加えようと 思うんですけれども この button 要素、button タグの中に 属性を加えていきます。 data 属性でハイフンですね。 そして container という属性をしています。 そしてこれには body これ何かと言うとですね、他の コンポーネントとポップオーバーを 組み合わせて使った時に ぶつかってしまうことがあるらしいので それを避けるための記述です。 次に今度は data- の toggle という属性で、ここに popover と入れます。 popover はボタンをクリックした時に 表示するんですけれども その表示する内容をこの後書いていきますが 結構長く書けるんで、ここは 改行しときましょう。そして data- の content です。 ここに文章を打ち込むんですが、あまり 長いのも面倒なので ポップオーバーの説明 という風にしておきます。 そしてこれを動かすのは JavaScript なんですね。jQuery を使いますので 公式サイトから jQuery のコードを コピーしてきます。 Bootstrap の公式サイト getbootstrap.com で Documentation に行って Search で popover ということなんですが もうこのあたりで出てきますね。 そしてウィンドウをスクロールして この上の方です。 ２つ jQuery のコードがありますけれど この上の方で結構です。 これを選択してコピーします。 script 要素は jQuery を読み込んでから ということになりますので body の閉じタグの一個前で script 要素を入れて 早速閉じますが、今コピーした コードをペーストします。 インデントを整えておきましょう。 これでいいですね。保存をして 確かめてみます。 ボタンをクリックするとポップオーバーが デフォルトでは右側に表示されます。 そしてクリックすると閉じる ということになります。 オプションを加えていきましょう。 ポップオーバーの説明、というのが content で、data-content なんですが この上に title…