ツールチップ

ツアーコンポーネントの各ステップのツールチップは、以下のようにタイトル、説明文、ナビゲーションボタン、閉じるボタンで構成され、表示位置や方向を自動調整できます。

ツールチップの設定項目

ツアーコンポーネントでは、各ステップで表示されるツールチップの外観や動作を詳細にカスタマイズできます。

項目	型	説明	デフォルト値
tipDirection	TipDirection	ツールチップの表示方向を指定	TipDirection.Bottom
tipPosition	TipPosition	ツールチップの表示位置を指定	TipPosition.Balanced
tipClassName	string	ツールチップに適用するCSSクラス名	''
title	string \| (() => HTMLElement)	ツールチップのタイトル	''
description	string \| (() => HTMLElement)	ツールチップの説明文	''
message	string \| (() => HTMLElement)	ツールチップの追加メッセージ情報	''
tipResource	TourTipResourceConfig	ボタンのテキストを設定 nextButton, previousButton, doneButton	'次へ', '前へ', '完了'
showCloseButton	boolean	閉じるボタンの表示／非表示	true
hidePreviousButton	boolean	最初のステップで前へボタンを非表示にするかどうか	false
hideDoneButton	boolean	最後のステップで完了ボタンを非表示にするかどうか	false
customTip	(context: TourCustomTipContext) => void	カスタムツールチップの関数	undefined
disablePreviousButton	boolean	指定したステップで前へボタンを無効化にする	false
disableNextButton	boolean	指定したステップで次へボタンを無効化にする	false

カスタムツールチップの設定

customTipコールバックを使用してツールチップの表示内容をカスタマイズしています。このコールバック関数では、contextオブジェクトを通じてツアーの状態情報やDOM要素にアクセスし、進行状況表示を独自の形式で表示したり、「スキップ」ボタンを動的に追加できます。

次のサンプルコードは、プログレスバーとスキップボタンをカスタマイズする例です。

const gctour = new InputMan.GcTour({
    steps: [
        {
            target: input1,
            title: 'Step1',
            description: 'Step1の説明です。',
        },
        {
            target: input2,
            title: 'Step2',
            description: 'Step2の説明です。',
        },
    ],
    customTip: (context) => {
        context.dom.progress.replaceWith(
        renderProgress(context.tour.activeIndex + 1, context.tour.length)
        );
        if (context.tour.activeIndex !== context.tour.length - 1) {
        const skipButton = renderSkipButton();
        skipButton.addEventListener('click', () => context.tour.close());
        context.dom.previousButton.before(skipButton);
        }
    },
});

function renderProgress(current, total) {
    const progress = document.createElement('div');
    progress.textContent = `${current} / ${total}`;
    return progress;
}

function renderSkipButton() {
    const skipButton = document.createElement('button');
    skipButton.classList.add('gcim__tour-footer-btn');
    skipButton.textContent = 'スキップ';
    return skipButton;
}

上記のサンプルコードを実行すると、カスタムツールチップが適用されます。