Tooltip erscheint über dem Element in der mobilen Ansicht intro.js

Question

Ich benutze intro.js für eine erste Tour einer Seite auf meiner Website. Die Tour sieht auf dem Desktop gut aus, aber auf Mobilgeräten erscheint der Tooltip direkt über dem Element, das beschrieben wird. Der Benutzer kann das Element in der mobilen Ansicht nicht sehen, da die QuickInfo direkt über dem Element angezeigt wird. Siehe Bild unten:

Ich versuchte, die `l Positionen der Werkzeugspitze Customizing aber der Ausgang bleibt gleich. Das Skript, das ich verwenden, um die Position anzupassen gegeben:

var tour = introJs(); 
tour.setOption('positionPrecedence', ['top', 'bottom', 'left', 'right']); 

Auch kann ich nicht auf die Zahl von Daten-Stufen über Werkzeugspitze sehen. In der Desktop-Version gibt es kein Problem.

Kann jemand bitte erklären, was das Problem ist? Vielen Dank im Voraus!

Answer 1

Zusammen bilden die folgenden CSS haben mir geholfen, das Problem zu lösen:

@media (max-width: 500px) { 
    .introjs-helperNumberLayer{ 
     left: 0px!important; 
     top: -10px!important; 
    } 
    .introjs-tooltip{ 
     margin-top: 40px!important; 
    } 
} 

Answer 2

Der Quellcode für die 2.5.0 Version lautet:

/* Precedence of positions, when auto is enabled */ 
positionPrecedence: ["bottom", "top", "right", "left"] 

Wenn Sie Ihre Anpassungen wollen die Position Feld Auto arbeiten, versuchen, in jedem Schritt der Einstelloptionen als die Standardposition ist eingestellt auf unten.

z:

tour.setOption('steps', [ 
    { 
     intro: '...' 
     position: 'auto' 
    } 
]) 

tour.setOption('positionPrecedence', ['top', 'bottom', 'left', 'right']) 

auch versuchen, die Element Eigenschaft festlegen, die aus dem Dokument auf dem angegebenen Selektor das erste Element nimmt.