スポンサー
Support Framework7

ツールチップ

    ツールチップは、対象となる要素にカーソルを置いたり、タップしたりすると、情報を示すテキストを表示します。

    ツールチップは、任意の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を作成するために必要なパラメータの一覧を見てみましょう。

    ParameterTypeDefaultDescription
    targetElHTMLElement
    string
    Tooltipの対象となる要素。Tooltipは、この要素の周りに表示されます。HTML要素またはツールチップ対象要素のCSSセレクタを含む文字列
    textstringツールチップのテキストまたはHTMLコンテンツ
    offsetnumber0ツールチップの位置への余分なオフセット(px単位)
    triggerstringhoverどのようにしてツールチップを開くかを定義します。hover, click, manual` のいずれかです。

    hover`の場合、デスクトップではマウスのホバー時に、タッチデバイスではタップ&ホールド時に、ツールチップがトグルされます。

    手動」の場合、ツールチップの表示は、tooltip.show()tooltip.hide()メソッドで制御します。

    cssClassstringTooltip要素に追加のcssクラスが追加されます。ツールチップの追加スタイリングに使用できます。
    renderfunction (tooltip)Tooltip要素をレンダリングする関数で、完全なTooltip HTMLレイアウト文字列を返す必要があります。
    containerElHTMLElement
    string
    Tooltipをマウントする要素。(デフォルトはアプリのルート要素 app.el)
    delegatedbooleanfalse委任されたツールチップを有効にします。複数の要素に同じツールチップを表示する必要がある場合に便利です。この場合、targetEl を CSS セレクタ文字列として指定する必要があり、指定した要素に対して同じツールチップが再利用されます。
    onobject

    イベントハンドラーを持つオブジェクト。例えば、以下のようになります。

    var tooltip = app.tooltip.create({
      targetEl: '.some-link',
      on: {
        show: function () {
          console.log('Tooltip became visible')
        }
      }
    })
    

    ツールチップのメソッドとプロパティ

    Tooltipを作成するには、まずメソッドをコールしなければなりません。

    var tooltip = app.tooltip.create({ /* parameters */ })

    その後、初期化されたインスタンス(上記の例では tooltip という変数)に、便利なメソッドやプロパティを設定します。

    Properties
    tooltip.appグローバルアプリのインスタンスへのリンク
    tooltip.targetElTooltipのターゲットとなるHTML要素
    tooltip.$targetElツールチップのターゲットとなるHTML要素を持つDom7インスタンス
    tooltip.elTooltip自体の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イベント

    EventTargetDescription
    tooltip:showTooltip Element
    Tooltip Target
    Tooltip が表示されるとイベントが発生します。
    tooltip:hideTooltip Element
    Tooltip Target
    イベントは、Tooltip が非表示になったときに発生します。
    tooltip:beforedestroyTooltip Element
    Tooltip Target
    イベントは、Tooltipインスタンスが破壊される直前に発生します。

    アプリと Tooltip インスタンスのイベント

    Tooltipインスタンスは、selfインスタンスとappインスタンスの両方でイベントを発行します。アプリのインスタンスのイベントは、同じ名前でプレフィックスが tooltip となっています。

    EventArgumentsTargetDescription
    show(tooltip)tooltipイベントは、Tooltipが表示されたときに発生します。イベントハンドラは、引数としてTooltipインスタンスを受け取ります。
    tooltipShow(tooltip)app
    hide(tooltip)tooltipTooltipが非表示になるとイベントが発生します。引数のイベントハンドラがToolitpインスタンスを受け取ります。
    tooltipHide(tooltip)app
    beforeDestroy(tooltip)tooltipTooltipインスタンスが破壊される直前にイベントが発生します。引数のイベントハンドラが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>