Ändern der Standard-intro.js-Tooltip-Platzierung

Question

Ich verwende intro.js, um eine Tour meiner Website einzurichten, und ich möchte die Standard-Platzierung der QuickInfo (wenn nicht an ein Element angefügt) in der Nähe von die Seite statt der vertikalen Mitte.

Es sieht nicht so aus, als gäbe es eine Option, um es direkt zu setzen, aber gibt es eine Möglichkeit, das CSS zu ändern? (oder durch Bearbeiten der Quelle, obwohl dies eine Art letzter Ausweg ist).

Answer 1

Ich musste etwas ähnliches tun. Nicht elegant, aber es funktioniert.

In der API-Dokumentation gibt es eine onafterchange Methode. Geben Sie ihr eine Callback-Funktion und sie wird jedes Mal ausgelöst, wenn ein Schritt angezeigt wird.

Wenn die QuickInfo ein Zielelement enthält, enthält das Argument des Rückrufs dieses Element. Wenn der Tooltip kein Element enthält, enthält das Argument ein Element mit der Klasse introjsFloatingElement. Sie müssen also nur nach dem Vorhandensein dieser Klasse für dieses Element suchen. Wenn dies der Fall ist, können Sie die Stile der Tooltip-Elemente anpassen.

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(); 

Hinweis:

• Ich versuchte zunächst onbeforechange, aber das hat nicht funktioniert. Nicht sicher warum.
• Zuerst habe ich versucht, die introjs-tooltipReferenceLayer Element nur, aber die geschachtelte Elemente (introjs-helperNumberLayer und introjs-Tooltip) nicht richtig positioniert auf der ersten Anzeige einzustellen. Ich musste diese Elemente auf nachfolgenden Displays überprüfen, um die richtigen Stylings zu erhalten.
• Getestet mit intro.js 2.5.0. Elementklassen sind nicht Teil der API-Spezifikation, daher weiß ich nicht, wie zukunftssicher diese Lösung ist.

Answer 2

Ich schaute in die Dokumentation intro.js. Sie sollten diese Codezeile einfach zu Ihrem Skript hinzufügen können.

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