ツールチップ
ツールチップは、対象となる要素にカーソルを置いたり、タップしたりすると、情報を示すテキストを表示します。
ツールチップは、任意のHTMLコンテンツを持つ要素の周囲に配置できます。
ツールチップのレイアウト
Tooltipは、JavaScriptのみのコンポーネントで、HTMLのレイアウトはありません。
Tooltipアプリのメソッド
Tooltipを作成・初期化する必要があります。ここでは、Tooltipに関連するAppメソッドを紹介します。
app.tooltip.create(parameters)- Tooltipインスタンスの作成
- parameters - object. Tooltipのパラメータを持つオブジェクト
メソッドは作成されたTooltipインスタンスを返します
app.tooltip.destroy(targetEl)- Tooltipインスタンスの破棄
- targetEl - HTMLElementまたはstring(CSSセレクタ付き)またはobject(インスタンス)。破壊するTooltip要素またはTooltipインスタンスです。
app.tooltip.get(targetEl)- Tooltipインスタンスを対象のHTML要素で取得します。
- targetEl - HTMLElement または string (CSS Selectorを使用). Tooltipのターゲットとなる要素。
メソッドはTooltipインスタンスを返します。
app.tooltip.show(targetEl)- ツールチップ表示
- targetEl - HTMLElement または string (CSSセレクタ付き)。Tooltipの対象となる要素を指定します。
メソッドはTooltipのインスタンスを返します
app.tooltip.hide(targetEl)- ツールチップの非表示
- targetEl - HTMLElementまたはstring(CSSセレクタ付き)。Tooltipの対象となる要素を指定します。
メソッドはTooltipのインスタンスを返します
app.tooltip.setText(targetEl, text)- ツールチップテキストの変更
- targetEl - HTMLElement または string (CSSセレクタ付き) のいずれか。ツールチップのターゲット要素
- text - string - 指定されたTooltipに設定される新しいテキストです。
メソッドはTooltipのインスタンスを返します。
Tooltipのパラメータ
ここでは、Tooltipを作成するために必要なパラメータの一覧を見てみましょう。
Parameter | Type | Default | Description |
---|---|---|---|
targetEl | HTMLElement string | Tooltipの対象となる要素。Tooltipは、この要素の周りに表示されます。HTML要素またはツールチップ対象要素のCSSセレクタを含む文字列 | |
text | string | ツールチップのテキストまたはHTMLコンテンツ | |
offset | number | 0 | ツールチップの位置への余分なオフセット(px単位) |
trigger | string | hover | どのようにしてツールチップを開くかを定義します。hover, click, manual` のいずれかです。hover`の場合、デスクトップではマウスのホバー時に、タッチデバイスではタップ&ホールド時に、ツールチップがトグルされます。 手動」の場合、ツールチップの表示は、 |
cssClass | string | Tooltip要素に追加のcssクラスが追加されます。ツールチップの追加スタイリングに使用できます。 | |
render | function (tooltip) | Tooltip要素をレンダリングする関数で、完全なTooltip HTMLレイアウト文字列を返す必要があります。 | |
containerEl | HTMLElement string | Tooltipをマウントする要素。(デフォルトはアプリのルート要素 app.el ) | |
delegated | boolean | false | 委任されたツールチップを有効にします。複数の要素に同じツールチップを表示する必要がある場合に便利です。この場合、targetEl を CSS セレクタ文字列として指定する必要があり、指定した要素に対して同じツールチップが再利用されます。 |
on | object | イベントハンドラーを持つオブジェクト。例えば、以下のようになります。
|
ツールチップのメソッドとプロパティ
Tooltipを作成するには、まずメソッドをコールしなければなりません。
var tooltip = app.tooltip.create({ /* parameters */ })
その後、初期化されたインスタンス(上記の例では tooltip
という変数)に、便利なメソッドやプロパティを設定します。
Properties | |
---|---|
tooltip.app | グローバルアプリのインスタンスへのリンク |
tooltip.targetEl | TooltipのターゲットとなるHTML要素 |
tooltip.$targetEl | ツールチップのターゲットとなるHTML要素を持つDom7インスタンス |
tooltip.el | Tooltip自体のHTML要素 |
tooltip.$el | ツールチップを持つDom7のインスタンス HTML要素 |
tooltip.text | ツールチップのテキスト/コンテンツ |
tooltip.opened | 開く/表示するかどうかを示すブール値のプロパティ |
tooltip.params | ツールチップのパラメータ |
Methods | |
tooltip.show(targetEl) | targetEl要素の周りにツールチップを表示します。targetEl が指定されていない場合は、初期化時にパラメータで渡された targetEl が使用されます。 |
tooltip.hide() | ツールチップを隠す |
tooltip.setText(text) | ツールチップのテキストまたは HTML コンテンツを新しいものに変更します。 |
tooltip.setTargetEl(targetEl) | ツールチップのターゲット要素を指定した要素に変更します。 |
tooltip.destroy() | tooltipインスタンスを破棄します。 |
tooltip.on(event, handler) | イベントハンドラの追加 |
tooltip.once(event, handler) | イベントハンドラを追加します。ただし、イベントハンドラが発生した後は削除されます。 |
tooltip.off(event, handler) | イベントハンドラの削除 |
tooltip.off(event) | 指定されたイベントのハンドラをすべて削除する |
tooltip.emit(event, ...args) | インスタンスでイベントを発生させる |
Tooltipのイベント
Tooltipは、以下のDOMイベントをtooltip要素に、イベントをappとtooltipインスタンスに発行します。
DOMイベント
Event | Target | Description |
---|---|---|
tooltip:show | Tooltip Element Tooltip Target | Tooltip が表示されるとイベントが発生します。 |
tooltip:hide | Tooltip Element Tooltip Target | イベントは、Tooltip が非表示になったときに発生します。 |
tooltip:beforedestroy | Tooltip Element Tooltip Target | イベントは、Tooltipインスタンスが破壊される直前に発生します。 |
アプリと Tooltip インスタンスのイベント
Tooltipインスタンスは、selfインスタンスとappインスタンスの両方でイベントを発行します。アプリのインスタンスのイベントは、同じ名前でプレフィックスが tooltip
となっています。
Event | Arguments | Target | Description |
---|---|---|---|
show | (tooltip) | tooltip | イベントは、Tooltipが表示されたときに発生します。イベントハンドラは、引数としてTooltipインスタンスを受け取ります。 |
tooltipShow | (tooltip) | app | |
hide | (tooltip) | tooltip | Tooltipが非表示になるとイベントが発生します。引数のイベントハンドラがToolitpインスタンスを受け取ります。 |
tooltipHide | (tooltip) | app | |
beforeDestroy | (tooltip) | tooltip | Tooltipインスタンスが破壊される直前にイベントが発生します。引数のイベントハンドラがTooltipのインスタンスを受け取ると |
tooltipBeforeDestroy | (tooltip) | app |
Tooltipの自動初期化
Tooltip APIを使用する必要がなく、Tooltipのターゲットとなる要素がページ内にあり、ページの初期化時にDOMに表示される場合は、ターゲット要素にtooltip-init
クラスを追加して、そのdata-tooltip
属性にTooltipテキストを指定するだけで、Tooltipを自動初期化することができます。
<!-- tooltip-initクラスを追加し、data-tooltip属性にtooltipテキストを指定する。 -->
<a href="/profile/" class="link tooltip-init profile-link" data-tooltip="Profile settings">
<i class="profile-icon"></i>
</a>
この場合、生成されたTooltipインスタンスにアクセスするには、app.tooltip.get
アプリメソッドを使用します。
var tooltip = app.tooltip.get('.profile-link');
// ツールチップテキストの変更
tooltip.setText('Profile');
CSS Variables
Below is the list of related CSS variables (CSS custom properties).
:root {
--f7-tooltip-bg-color: rgba(0, 0, 0, 0.87);
--f7-tooltip-text-color: #fff;
--f7-tooltip-border-radius: 4px;
--f7-tooltip-padding: 8px 16px;
--f7-tooltip-font-size: 14px;
--f7-tooltip-font-weight: 500;
--f7-tooltip-desktop-padding: 6px 8px;
--f7-tooltip-desktop-font-size: 12px;
}
Examples
<template>
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Tooltip</div>
<div class="right">
<a href="#" class="link navbar-tooltip">
<i class="icon f7-icons if-not-md">info_circle_fill</i>
<i class="icon material-icons if-md">info_outline</i>
</a>
</div>
</div>
</div>
<div class="page-content">
<div class="block block-strong">
<p>Tooltips display informative text when users hover over, or tap an target element.</p>
<p>Tooltip can be positioned around any element with any HTML content inside.</p>
</div>
<div class="block block-strong">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia augue urna, in tincidunt augue
hendrerit ut. In nulla massa, facilisis non consectetur a, tempus semper ex. Proin eget volutpat nisl.
Integer lacinia maximus nunc molestie viverra.
<i style="font-size: 20px" class="icon f7-icons icon-tooltip if-not-md">info_circle_fill</i>
<i style="font-size: 20px" class="icon material-icons icon-tooltip if-md">info</i> Etiam ullamcorper
ultricies ipsum, ut congue
tortor rutrum at. Vestibulum rutrum risus a orci dictum, in placerat leo finibus. Sed a congue enim, ut
dictum felis. Aliquam erat volutpat. Etiam id nisi in magna egestas malesuada. Sed vitae orci
sollicitudin, accumsan nisi a, bibendum felis. Maecenas risus libero, gravida ut tincidunt auctor,
<i style="font-size: 20px" class="icon f7-icons icon-tooltip if-not-md">info_circle_fill</i>
<i style="font-size: 20px" class="icon material-icons icon-tooltip if-md">info</i> aliquam non lectus. Nam
laoreet turpis erat, eget bibendum leo suscipit nec.</p>
<p>Vestibulum
<i style="font-size: 20px" class="icon f7-icons icon-tooltip if-not-md">info_circle_fill</i>
<i style="font-size: 20px" class="icon material-icons icon-tooltip if-md">info</i> gravida dui magna, eget
pulvinar ligula molestie hendrerit. Mauris vitae facilisis justo. Nam velit mi, pharetra sit amet luctus
quis, consectetur a tellus. Maecenas ac magna sit amet eros aliquam rhoncus. Ut dapibus vehicula lectus,
ac blandit felis ultricies at. In sollicitudin, lorem eget volutpat viverra, magna
<i style="font-size: 20px" class="icon f7-icons icon-tooltip if-not-md">info_circle_fill</i>
<i style="font-size: 20px" class="icon material-icons icon-tooltip if-md">info</i> felis tempus nisl,
porta
consectetur nunc neque eget risus. Phasellus vestibulum leo at ante ornare, vel congue justo tincidunt.
</p>
<p>Praesent tempus enim id lectus porta, at rutrum purus imperdiet. Donec eget sem vulputate, scelerisque
diam nec, consequat turpis. Ut vel convallis felis. Integer
<i style="font-size: 20px" class="icon f7-icons icon-tooltip if-not-md">info_circle_fill</i>
<i style="font-size: 20px" class="icon material-icons icon-tooltip if-md">info</i> neque ex, sollicitudin
vitae magna eget,
ultrices volutpat dui. Sed placerat odio hendrerit consequat lobortis. Fusce pulvinar facilisis rhoncus.
Sed erat ipsum, consequat molestie suscipit vitae, malesuada a
<i style="font-size: 20px" class="icon f7-icons icon-tooltip if-not-md">info_circle_fill</i>
<i class="icon material-icons icon-tooltip if-md">info</i> massa.</p>
</div>
<div class="block-title">Auto Initialization</div>
<div class="block block-strong">
<p>For simple cases when you don't need a lot of control over the Tooltip, it can be initialized
automatically with <code>tooltip-init</code> class and <code>data-tooltip</code> attribute: <a
style="display: inline-block" class="button button-round button-outline button-small tooltip-init"
data-tooltip="Button tooltip text">Button with Tooltip</a></p>
</div>
</div>
</div>
</template>
<script>
export default (props, { $f7, $on }) => {
$on('pageInit', () => {
var iconTooltip = $f7.tooltip.create({
targetEl: '.icon-tooltip',
text: 'Tooltip text',
});
var navbarTooltip = $f7.tooltip.create({
targetEl: '.navbar-tooltip',
text: 'One more tooltip<br>with more text<br><em>and custom formatting</em>'
});
});
return $render;
}
</script>