フォームの項目説明などに便利なポップオーバーの表示方法です。
デモはこちら
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;
}
