Bootstrap-tooltip-plugin
ブートストラップ-ツールチッププラグイン
ツールチップは、リンクを記述する必要がある場合に役立ちます。 プラグインは、_Jason Frame_によって作成された_jQuery.tipsy_プラグインに触発されました。 その後、ツールチップは更新され、画像なしで動作し、CSSアニメーションでアニメーション化し、ローカルタイトルストレージのデータ属性になりました。
'_このプラグイン機能を個別に含める場合は、 tooltip.js が必要です。 または、リンク:/bootstrap/bootstrap_plugins_overview [Bootstrap Plugins Overview]で説明されているように、_bootstrap.js_または縮小された_bootstrap.min.js_を含めることができます。_
使用法
ツールチッププラグインは、コンテンツとマークアップをオンデマンドで生成し、デフォルトでトリガー要素の後にツールチップを配置します。 次の2つの方法でツールチップを追加できます-
- Via data attributes -ツールチップを追加するには、 data-toggle = "tooltip" をアンカータグに追加します。 アンカーのタイトルは、ツールチップのテキストになります。 デフォルトでは、ツールチップはプラグインによってtopに設定されています。
<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>
- Via JavaScript -JavaScriptを介してツールチップをトリガーする-
$('#identifier').tooltip(options)
'__ ツールチッププラグインは、ドロップダウンなどのCSSプラグインや、前の章で説明した他のプラグインではありません。 このプラグインを使用するには、jquery(javascriptの読み取り)を使用してプラグインをアクティブにする必要があります。 ページ上のすべてのツールチップを有効にするには、このスクリプトを使用します-
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
'__
例
次の例は、データ属性を介したツールチッププラグインの使用を示しています。
<h4>Tooltip examples for anchors</h4>
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
title = "Tooltip on left"> Default Tooltip</a>.
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "top"
title = "Tooltip on top">Tooltip on Top</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
title = "Tooltip on bottom">Tooltip on Bottom</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "right"
title = "Tooltip on right">Tooltip on Right</a>
<br>
<h4>Tooltip examples for buttons</h4>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
Default Tooltip
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "left" title = "Tooltip on left">
Tooltip on left
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "top" title = "Tooltip on top">
Tooltip on top
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "bottom" title = "Tooltip on bottom">
Tooltip on bottom
</button>
<button type = " button" class = " btn btn-default" data-toggle = "tooltip"
data-placement = "right" title = "Tooltip on right">
Tooltip on right
</button>
<script>
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>
オプション
Bootstrap Data API経由で追加したり、JavaScript経由で呼び出したりできる特定のオプションがあります。 次の表にオプションを示します-
Option Name | Type/Default Value | Data attribute name | Description |
---|---|---|---|
animation | boolean Default: true | data-animation | Applies a CSS fade transition to the tooltip. |
html | boolean Default: false | data-html | Inserts HTML into the tooltip. If false, jQuery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks. |
placement | string | function Default: top | data-placement |
Specifies how to position the tooltip (i.e., top | bottom | left | right |
auto). _auto_を指定すると、ツールチップの向きが動的に変更されます。 たとえば、配置が「自動左」の場合、可能な場合はツールチップが左に表示され、そうでない場合は右に表示されます。 |
selector | string Default: false | data-selector |
If a selector is provided, tooltip objects will be delegated to the specified targets. | title | string | function Default: " |
data-title | The title option is the default title value if the title attribute isn’t present. | trigger | string Default: 'hover focus' |
data-trigger | Defines how the tooltip is triggered: *click | hover | focus |
manual*. You may pass multiple triggers; separate them with a space. | content | string | function Default: '' |
data-content | Default content value if data-content attribute isn’t present | delay | number |
object Default: 0 | data-delay |
Delays showing and hiding the tooltip in ms — does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is −
|
container |
string | false Default: false | data-container | Appends the tooltip to a specific element. Example: container: 'body' |
方法
以下は、ツールチップのためのいくつかの便利な方法です-
Method | Description | Example |
---|---|---|
Options − .tooltip(options) | Attaches a tooltip handler to an element collection. |
|
Toggle − .tooltip('toggle') | Toggles an element’s tooltip. |
|
Show − .tooltip('show') | Reveals an element’s tooltip. |
|
Hide − .tooltip('hide') | Hides an element’s tooltip. |
|
Destroy − .tooltip('destroy') | Hides and destroys an element’s tooltip. |
|
例
次の例は、データ属性を介したツールチッププラグインの使用を示しています。
<div style = "padding: 100px 100px 10px;">
This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
title = "show">Tooltip on method show</a>.
This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip"
data-placement = "left" title = "hide">Tooltip on method hide</a>.
This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip"
data-placement = "top" title = "destroy">Tooltip on method destroy</a>.
This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip"
data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
<br><br><br><br><br><br>
<p class = "tooltip-options" >
This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
</h2>">Tooltip on method options</a>.
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { $(".tooltip-options a").tooltip({html : true });});
</script>
</div>
イベント
次の表に、ツールチッププラグインで動作するイベントを示します。 このイベントを使用して、関数にフックすることができます。
Event | Description | Example |
---|---|---|
show.bs.tooltip | This event fires immediately when the show instance method is called. |
|
shown.bs.tooltip | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). |
|
hide.bs.tooltip | This event is fired immediately when the hide instance method has been called. |
|
hidden.bs.tooltip | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). |
|
例
次の例は、データ属性を介したツールチッププラグインの使用を示しています。
<h4>Tooltip examples for anchors</h4>
This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
title = "Default Tooltip">Default Tooltip</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
alert("Alert message on show");
})});
</script>