【Bootstrap】PopoversでDIV要素にTABINDEXを付けてFOCUS可能にする

【Bootstrap】PopoversでDIV要素にTABINDEXを付けてFOCUS可能にする



BootstrapのPopoversのサンプルでは、aタグやbuttonタグを使用していますが、divタグを対象に指定した場合、triggerにclickhoverしか指定することが出来ません。

Popovers
参考
Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Popovers

Popoversが表示する際は、他領域クリック等で非表示にしたいのでtriggerfocusを指定するのが便利なので、divタグがfocus出来るように以下のようにtabindexを追加します。

コード–

<div class="d-inline-block border p-3 bg-primary text-white" data-toggle="popover" tabindex="0" title="タイトル" data-content="コンテンツ..." data-trigger="focus">click !</div>

Bootstrap 4 フロントエンド開発の教科書

Bootstrap 4 フロントエンド開発の教科書

宮本 麻矢, 朝平 文彦
3,608円(01/22 09:26時点)
発売日: 2018/08/25
Amazonの情報を掲載しています
今日はここまで

関連する記事



こちらはいかが?


コメントを残す