Bootstrap tooltip in der falschen position auf der ersten zu schweben, dann in der richtigen position

Bin ich über die tooltips in twitter bootstrap auf ein div-Element auf einer Webseite. Der tooltip initialisiert, aber auf der ersten hover-es ist in der falschen position; jedoch, Sie auf der nachfolgenden schwebt der tooltip ist in der richtigen position.

Ich denke, dass das problem Auftritt, weil das div, dass der tooltip befestigt ist, ist absolut positioniert.

Hier ist die div-Tags in meinem html:

<div class="btn-group" id="sample-menu" data-toggle="tooltip" data-placement="left" title="Tooltip on left">

Dies ist, wie der tooltip wird angezeigt, auf der ersten hover:

Und hier ist, wie es angezeigt wird, auf jedem hover nach:

(Größen ändern sich nicht, nur den screenshot zuschneiden Größe)

Stile angewendet, um die div sind:

#sample-menu {
  position: absolute;
  top: 95px;
  right: 608px;
}

Könnte ich wahrscheinlich position der div-anders zu bekommen dies funktioniert, ich Frage mich nur, warum der tooltip scheint zu funktionieren perfekt auf dem absolut positionierten div, aber nur nach dem ersten schweben.

** Habe ich ein paar mehr tooltips auf divs, die nicht absolut positioniert und ich habe das gleiche problem (Erster Auftritt der tooltip entfernt wird, aus meinem element, und dann nach dem ersten erscheinen ist es richtig). Ich habe eine svg auf der Seite mit Elementen, die Hinzugefügt werden und die Größe mit javascript (d3). Wie es scheint, muss ich nennen so etwas Positionierung der tooltips nach der Seite alle Elemente werden Hinzugefügt,/Größe, aber keiner von der Bootstrap Tooltip oder Tether Neupositionierung Lösungen haben für mich gearbeitet.

Dieser möglicherweise relevant und hilfreich für jemand.

InformationsquelleAutor haydenwagner | 2017-01-11

9

Das unten hat sich für mich in der Vergangenheit für die tool-Tipps mit absoluter Positionierung:
```
$('[data-toggle="tooltip"]').tooltip({
   container: 'body'
});
```
Ich nur trigger dieses Skript, nachdem alles fertig ist Rendern der Seite und alles ist fein. Auch in Bereichen, in denen es ein update der tool-Tipp habe ich zu laufen, diese wieder.

Ich sah, dass die bootstrap-Seite erwähnt das 'container' - option kann angegeben werden, aber ich weiß nicht genau verstehen, was es tut. Die Seite sagt, geben Sie den container an und vermeiden rendering-Probleme in komplexeren Komponenten', und später 'Fügt der QuickInfo zu einem bestimmten element'. Ich habe versucht, deinen code nach dem laden der Seite aber löst es nicht mein Problem.
Ausblenden und anzeigen von mein-tooltip einmal mit javascript löst das Problem, aber ich verstehe nicht, warum kann ich nicht verschieben, ohne sich zu verstecken und zu zeigen. In die Leine docs sagt, Sie können call " - tether.position()' nach der Seite ist vorhanden, jedoch funktionierte dies nicht für mich.
Gibt es eine Möglichkeit, Sie können Feuer der obige code nach deinen anderen javascript ist getan ausgeführt? Ich hatte nur Glück mit dieser Methode, wenn ich das Feuer in einem nach der render-Funktion. Meine Vermutung für dein Problem ist, dass andere javascript/css-ist die Verlagerung der Elemente genug, um Durcheinander zu bringen, nachdem diese Funktion aufgerufen wurde.
Ja, ich habe es gerade ausprobiert, nachdem alle meine anderen code und es hat nicht funktioniert für mich. Lege ich noch ein timeout auf Ihren code, um sicherzustellen, dass es war später feuern, und auf der ersten hover-tooltip ist noch entfernt ist von dem Knopf.
Hmmmm, klingt schwierig. Wenn es geschieht, auf nicht absolut positioniert tooltips dann heißt es wohl irgendwann mal über das Allgemeine QuickInfo-code ist fehlerhaft. Könnten Sie replizieren Ihr problem in einem codepen und verknüpfen Sie es hier, wir hätten also eine bessere Vorstellung von dem, was alles passiert ist? Danke!

InformationsquelleAutor Eric G
3

Hier ist ein codepen das ursprüngliche problem

Hatte ich die position des Körpers "relativ", so dass mein Kind Elemente können absolut positioniert werden, in der Art, wie ich wollte, und ich hatte auch eingestellt das der Körper margin 0 auto zum zentrieren des Inhalts. Diese Stile mischte sich mit der tooltip-container, option, Lösung, die Eric erwähnt in seiner Antwort.
```
/*original css*/
body {
  position: relative;
  width: 980px;

  /*set as important to work in codepen example*/
  margin:0 auto !important;
}

#sample-menu{
  position: absolute;
  top: 109px;
  left: 600px;
}

//js that didn't solve tooptip positioning issue
$(function(){
  $('[data-toggle="tooltip"]').tooltip({
    container: 'body'
  });
});
```
War es eine schlechte Praxis zu haben, dass das styling angewendet, um den Körper in den ersten Platz. Hier ist ein codepen, löst dieses problem und gibt mir immer noch das Aussehen und das Verhalten möchte ich ohne die tooltip-Probleme. Ich fügte hinzu, einen container um den Inhalt, um die Stile angewendet, und dann der tooltip "container: 'body' " - Lösung, Eric G vorgeschlagen gearbeitet.
```
/*new css with styling on a container div instead of the body*/
.container {
  position: relative;
  width: 980px;
  margin:0 auto;
}

#sample-menu{
  position: absolute;
  top: 109px;
  left: 600px;
}

//js now fixes the tooltip positioning issue
$(function(){
  $('[data-toggle="tooltip"]').tooltip({
   container: 'body'
  });
});
```
InformationsquelleAutor haydenwagner

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.