ブートストラップJSツールチップ

❮ 前次 ❯

JSツールチップ

ツールチップは、ユーザーが要素の上にマウスポインタを移動したときに表示される小さなポップアップボックスです。

ツールチップに関するチュートリアルについては、ブートストラップツールチップチュートリアルをお読みください。

データ経由-*属性

はdata-toggle="tooltip"ツールチップをアクティブにします。

このtitle属性は、ツールチップ内に表示されるテキストを指定します。

例

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

JavaScript経由

ツールチップはCSSのみのプラグインではないため、jQueryで初期化する必要があります。指定された要素を選択してtooltip()メソッドを呼び出します。

例

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();

ツールチップオプション

オプションは、データ属性またはJavaScriptを介して渡すことができます。データ属性の場合、data-placement = ""のように、オプション名をdata-に追加します。

Name	Type	Default	Description
animation	boolean	true	Specifies whether to add a CSS fade transition effect when showing and hiding the tooltip true - Add a fading effect false - Do not add a fading effect
container	string, or the boolean false	false	Appends the tooltip to a specific element. Example: container: 'body'
delay	number, or object	0	Specifies the number of milliseconds it will take to show and hide the tooltip. To specify a delay for showing and another one for hiding, use the object structure: delay: {show: 500, hide: 100} - which will take 500 ms to show the tooltip, but only 100 ms to hide it
html	boolean	false	Specifies whether to accept HTML tags in the tooltip: true - Accept HTML tags false - Do not accept HTML tags Note: The HTML must be inserted in the title attribute (or using the title option). When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks
placement	string	"top"	Specifies the tooltip position. Possible values: "top" - Tooltip on top "bottom" - Tooltip on bottom "left" - Tooltip on left "right" - Tooltip on right "auto" - Lets the browser decide the position of the tooltip. For example, if the value is "auto left", the tooltip will display on the left side when possible, otherwise on the right. If the value is "auto bottom", the tooltip will display at the bottom when possible, otherwise on the top
selector	string, or the boolean false	false	Adds the tooltip to a specified selector
template	string		Base HTML to use when creating the tooltip. The tooltip's title will be inserted into the element having the class .tooltip-inner and the element with the class .tooltip-arrow will become the tooltip's arrow. The outermost wrapper element should have the .tooltip class.
title	string	""	Specifies the text that should be displayed inside the tooltip
trigger	string	"hover focus"	Specifies how the tooltip is triggered. Possible values: "click" - Trigger the tooltip with a click "hover" - Trigger the tooltip on hover "focus" - Trigger the tooltip when it gets focus (by tabbing or clicking .e.g) "manual" - Trigger the tooltip manually Tip: To pass multiple values, separate them with a space
offset	number or a string	0	Offset of the tooltip relative to its target
fallbackPlacement	string or an aray	"flip"	Specifies which position Popper wil use on fallback
boundary	string or element	"scrollParent"	Overflow constraint boundary of the tooltip. Accepts the values "viewport", "window" or "scrollParent", or an HTML element

ツールチップメソッド

次の表に、使用可能なすべてのツールチップメソッドを示します。

Method	Description	Try it
.tooltip(options)	Activates the tooltip with an option. See options above for valid values
.tooltip("show")	Shows the tooltip
.tooltip("hide")	Hides the tooltip
.tooltip("toggle")	Toggles the tooltip
.tooltip("dispose")	Hides and destroys the tooltip

ツールチップイベント

次の表に、使用可能なすべてのツールチップイベントを示します。

Event	Description	Try it
show.bs.tooltip	Occurs when the tooltip is about to be shown
shown.bs.tooltip	Occurs when the tooltip is fully shown (after CSS transitions have completed)
hide.bs.tooltip	Occurs when the tooltip is about to be hidden
hidden.bs.tooltip	Occurs when the tooltip is fully hidden (after CSS transitions have completed)

❮ 前次 ❯

ブートストラップ4チュートリアル

ブートストラップ4グリッド

ブートストラップ4その他

ブートストラップ4Ref