Bootstrap-tooltip-plugin

提供：Dev Guides
2020年6月22日 (月) 20:01時点におけるMaintenance script (トーク | 投稿記録)による版 (Imported from text file)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先:案内、検索

ブートストラップ-ツールチッププラグイン

ツールチップは、リンクを記述する必要がある場合に役立ちます。 プラグインは、_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 − 

delay: { show: 500, hide: 100 }
 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. 
$().tooltip(options)
Toggle − .tooltip('toggle') Toggles an element’s tooltip. 
$('#element').tooltip('toggle')
Show − .tooltip('show') Reveals an element’s tooltip. 
$('#element').tooltip('show')
Hide − .tooltip('hide') Hides an element’s tooltip. 
$('#element').tooltip('hide')
Destroy − .tooltip('destroy') Hides and destroys an element’s tooltip. 
$('#element').tooltip('destroy')

例

次の例は、データ属性を介したツールチッププラグインの使用を示しています。 

<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. 
$('#myTooltip').on('show.bs.tooltip', function () {
  //do something
})
shown.bs.tooltip This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). 
$('#myTooltip').on('shown.bs.tooltip', function () {
  //do something
})
hide.bs.tooltip This event is fired immediately when the hide instance method has been called. 
$('#myTooltip').on('hide.bs.tooltip', function () {
  //do something
})
hidden.bs.tooltip This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  //do something
})

例

次の例は、データ属性を介したツールチッププラグインの使用を示しています。 

<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>
「https://www.finddevguides.com/index.php?title=Bootstrap-tooltip-plugin&oldid=7354」から取得
Powered by MediaWiki