デフォルトのintro.jsツールチップの配置を変更する

Question

私はintro.jsを使用して自分のウェブサイトのツアーを設定していますが、ツールチップのデフォルトの配置を設定したいと思います。垂直の中心の代わりにページ。

直接設定するオプションがないようですが、CSSを変更する方法はありますか？ （またはソースを編集することによって、それは最後の手段のようですが）。

Answer 1

私は同様のことをする必要がありました。エレガントではありませんが、機能します。

APIドキュメントには、onafterchangeメソッドがあります。コールバック関数を与えると、ステップが表示されるたびに起動します。

ツールチップにターゲット要素がある場合、コールバックの引数にはその要素が含まれます。ツールヒントに要素がない場合、引数にはクラスintrojsFloatingElementの要素が含まれます。だから、あなたはその要素のそのクラスの存在をチェックする必要があります。そうであれば、ツールチップ要素のスタイルを微調整できます。

var help = introJs(); 
help.onafterchange(function(targetEl){ 
    targetEl = jQuery(targetEl); 

    // check if it's a floating tooltip (not attached to an element) 
    if(targetEl.hasClass('introjsFloatingElement')){ 

     // adjust the position of these elements 
     jQuery('.introjs-tooltipReferenceLayer').offset({top : 120}); 
     jQuery('.introjs-tooltip').css({ 
      opacity: 1, 
      display: 'block', 
      left: '50%', 
      top: '50%', 
      'margin-left': '-186px', 
      'margin-top': '-91px' 
     }); 
     jQuery('.introjs-helperNumberLayer').css({ 
      opacity: 1, 
      left: '-204px', 
      top: '-109px' 
     }); 
    } 
}); 

// add your steps 
// ... 

help.start(); 

注：

• 私が最初にonbeforechangeを試してみましたが、それは動作しませんでした。理由は分かりません。まず
• 、私はintrojs-tooltipReferenceLayer要素が、ネストされた要素（introjs-helperNumberLayerとintrojs、ツールチップ）は、第1ディスプレイ上に正しく配置されなかった調整しようとしました。私はその後のディスプレイでこれらの要素を調べて、適切なスタイルを得る必要がありました。
• intro.js 2.5.0でテスト済みです。要素クラスはAPI仕様の一部ではないので、私はこのソリューションが将来どのようなものかを知りません。

Answer 2

私はintro.jsのドキュメントを調べました。このコード行をスクリプトに追加するだけで済みます。

introJs().setOption("tooltipPosition", "top");