メインコンテンツへスキップ

ドキュメント

ツールチップ

見栄えの良いツールチップを簡単に作成できます。

使用方法

このコンポーネントを適用するには、要素に uk-tooltip 属性を追加します。また、属性に title: テキスト オプションを追加する必要があります。この値はツールチップのテキストを表します。

<div uk-tooltip="title: Hello World"></div>

属性値に title オプションのみが含まれる場合は、uk-tooltip="テキスト" を使用することもできます。

<div uk-tooltip="Hello World"></div>
  • <button class="uk-button uk-button-default" uk-tooltip="Hello World">Hover</button>

配置

ツールチップの配置を調整するには、次のいずれかのオプションを uk-tooltip 属性に追加します。

<button uk-tooltip="title: Hello World; pos: top-left"></button>
属性 説明
pos: top ツールチップを上部に配置します。
pos: top-left ツールチップを左上に配置します。
pos: top-right ツールチップを右上に配置します。
pos: bottom ツールチップを下部に配置します。
pos: bottom-left ツールチップを左下に配置します。
pos: bottom-right ツールチップを右下に配置します。
pos: left ツールチップを左に配置します。
pos: right ツールチップを右に配置します。 

  • <p uk-margin>
    <button class="uk-button uk-button-default" uk-tooltip="Hello World">Top</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: top-left">Top Left</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: top-right">Top Right</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: bottom">Bottom</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: bottom-left">Bottom Left</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: bottom-right">Bottom Right</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: left">Left</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: right">Right</button>
</p>

遅延

ツールチップを少し遅れて表示するには、delay オプションを uk-tooltip 属性にミリ秒単位の値で追加します。

<div uk-tooltip="title: Hello World; delay: 500"></div>
  • <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; delay: 500">Hover</button>

コンポーネントオプション

これらのオプションはすべてコンポーネント属性に適用できます。 複数のオプションはセミコロンで区切ります。 詳細はこちら

オプション 値 デフォルト 説明
title 文字列 ツールチップテキスト。
pos 文字列 top-center ツールチップの位置。
offset 数値 false ツールチップのオフセット。
animation 文字列 uk-animation-scale-up スペース区切りのアニメーション名。アニメーションアウトの場合はカンマ区切り。
duration 数値 100 アニメーションの継続時間。
delay 数値 0 表示遅延。
cls 文字列 uk-active アクティブクラス。
container 文字列 body セレクターを使用してターゲットコンテナを定義し、ツールチップをDOMのどこに追記するかを指定します。

title は *プライマリ* オプションであり、属性値に唯一のオプションである場合、キーを省略できます。

<span uk-tooltip="Hello World"></span>

JavaScript

JavaScriptコンポーネントの詳細をご覧ください。

初期化

UIkit.tooltip(element, options);

イベント

このコンポーネントによって挿入された要素で、以下のイベントがトリガーされます。

名前 説明
beforeshow アイテムが表示される前に発生します。 イベントで preventDefault() を呼び出すことで表示を防止できます。
show アイテムが表示された後に発生します。
shown アイテムの表示アニメーションが完了した後に発生します。
beforehide アイテムが非表示になる前に発生します。 イベントで preventDefault() を呼び出すことで非表示を防止できます。
hide アイテムの非表示アニメーションが開始された後に発生します。
hidden アイテムが非表示になった後に発生します。

例

UIkit.util.on(document, 'show', '.uk-tooltip.uk-active', function() {
  // do something
});

メソッド

コンポーネントでは以下のメソッドが使用可能です。

表示

UIkit.tooltip(element).show();

ツールチップを表示します。

非表示

UIkit.tooltip(element).hide();

ツールチップを非表示にします。

アクセシビリティ

ツールチップコンポーネントは、ツールチップウィジェットWAI-ARIA設計パターンに準拠しており、適切なWAI-ARIAのロール、状態、およびプロパティを自動的に設定します。