Intro.jsで特定のガイドだけ表示位置を変更する

通常ガイドのツールチップは、intro.jsファイル内のオプションで設定した位置に表示されます。例えばオプションを以下のように設定していた場合、通常のガイドではオブジェクトの下部へ表示されます。

  function IntroJs(obj) {
    this._targetElement = obj;

    this._options = {
      /* Next button label in tooltip box */
      nextLabel: '次へ',
      /* Previous button label in tooltip box */
      prevLabel: '前へ',
      /* Skip button label in tooltip box */
      skipLabel: 'スキップ',
      /* Done button label in tooltip box */
      doneLabel: '完了',
      /* Default tooltip box position */
      tooltipPosition: 'bottom',
      /* Next CSS class for tooltip boxes */
      tooltipClass: '',
      /* Close introduction when pressing Escape button? */
      exitOnEsc: true,
      /* Close introduction when clicking on overlay layer? */
      exitOnOverlayClick: false,
      /* Show step numbers in introduction? */
      showStepNumbers: false,
      /* Let user use keyboard to navigate the tour? */
      keyboardNavigation: true,
      /* Show tour control buttons? */
      showButtons: true,
      /* Show tour bullets? */
      showBullets: false
    };
  }

通常のガイド

<div data-intro="ログインしてみましょう！" data-step="1"><a href="login.php"> ログイン</a></div>

これにdata-positionの指定を加えることで、表示位置を変更することができます。
以下の場合はオブジェクトの上部に表示されます。

表示位置を変更するガイド

<div data-intro="ログインしてみましょう！" data-step="1" data-position="top"><a href="login.php"> ログイン</a></div>