Bootstrapでポップオーバー(Popovers)を表示する

harada 23,496views 更新:2014年4月10日

フォームの項目説明などに便利なポップオーバーの表示方法です。
デモはこちら

CSS

<link href="bootstrap.css" rel="stylesheet" type="text/css" />

Javascript

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script>
$('.tooltip-tool').tooltip({
            selector: "a[data-toggle=tooltip]"
        })
$("a[data-toggle=popover]").popover()
</script>

HTML

<a href="javascript:void(0);" data-toggle="popover" data-html="true" data-placement="bottom" data-title="Aipo.comのSプランに登録します。" data-content="このプランでは期間やユーザー数など無制限に、完全無料でご利用いただけます。">この登録により何ができますか?</a>

必須設定項目

data-toggle=”popover” ポップオーバー表示にする指定をします。
data-title=”” ポップオーバーに表示するタイトル
data-content=”” ポップオーバーに表示する内容

よく利用するオプション項目

data-html=”” ポップオーバー内でhtmlを利用可能にするかどうかを設定します。
利用可能にする場合は”true”に設定します。何も設定しない場合はデフォルトの”false”となります。
data-placement=”” top | bottom | left | right から、表示位置を指定します。
何も設定しない場合はデフォルトの”right”となります。
data-trigger=”” click | hover | focus | manual から、何をすることでポップオーバーを表示するかを指定します。
何も設定しない場合はデフォルトの”click”となります。

また、data-title部分には.popover-titleというクラスが付与されるため、下記のように指定することでbootstrapで指定されたcssを上書きすることができます。

.popover .popover-title {
    background: none;
    border-bottom: medium none !important;
    margin: 0 !important;
    padding: 10px 14px 0 !important;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません