bootstrap tooltip\popover - Lösung inkonsistente Platzierung auf der linken Seite

Arbeite ich an einem Projekt und habe festgestellt, dass einige Inkonsistenzen in der bootstrap-Verhalten, dass ich gerne lösen.

Wenn ein popover (oder tooltip, was auch immer, Sie sind im Grunde die gleichen) nähert sich der Rand des Bildschirms - wenn es eine rechtsseitige man, wenn kurz vor der Kante - es wird der Vertrag so nicht zu gehen offscreen (es funktioniert nur bis zu einem gewissen Punkt, aber das ist in der Regel genug).

Dies nicht geschehen, wenn die Platzierung ist auf der linken Seite.

d.h.:

richtige Platzierung:

Normale Breite:

$bootstrap tooltip\popover - Lösung inkonsistente Platzierung auf der linken Seite$

Nah an der Kante:

$bootstrap tooltip\popover - Lösung inkonsistente Platzierung auf der linken Seite$

Links Platzierung:

Normale Breite:

$bootstrap tooltip\popover - Lösung inkonsistente Platzierung auf der linken Seite$

nah an der Kante:

$bootstrap tooltip\popover - Lösung inkonsistente Platzierung auf der linken Seite$

Diese Bilder sind von einer kleinen DEMO, die ich schrieb, um das problem zu veranschaulichen.

Ich habe Durcheinander herum mit dem Quellcode, so weit ohne Erfolg. Ich kann nicht scheinen, um meine finger auf, was genau dieses Verhalten verursacht in den ersten Platz.

Irgendwelche Ideen?

p.s.

Ich bin mit Bootstrap 3.1.1. Der neue 3.2 hat nicht das Problem zu lösen (und ich möchte vermeiden, aktualisieren an dieser Stelle).

Großes Update!

Nachdem einige Graben, dachte ich, dass dies nichts zu tun mit der bootstrap - es ist eine einfache css - es scheint, dass, wenn Sie position ein element absolut und schieben Sie es an den Seiten wird es versuchen, und bleiben in den Bildschirm.

Ich wusste nichts über dieses Verhalten, und es passiert automatisch - aber nur, um die Richtung Sie drängen - also ein div-geschoben von der linken Seite wird der Vertrag bei erreichen der rechten Kante des Bildschirms und Umgekehrt.

Es ist einfach so passiert, dass die popovers werden erst zugestellt, mit der left Zuordnung - das ist, warum sehen wir die inconsistend Verhalten - wenn es geschoben, um die richtige it-Verträgen, aber nicht in die andere Richtung.

Also die Lösung ist die Zuordnung right statt - klingt einfach?
Nicht so viel. Ich nahm den source-code und manipuliert Sie ihn ein bisschen, das hinzufügen dieser Zeilen (irgendwo arond Linie 250 in der jsfiddle):

if (placement == 'left' && offset.left < 0) {
    var right = ( $(window).width() + 10 ) - ( offset.left + actualWidth ); 

    offset.left = 0;
    $tip.offset(offset);
    $tip.css({ 'right': right });
}

Scheint vernünftig, richtig? Wenn der offset auf der linken Seite ist kleiner als 0 (D. H., es geht offscreen) dann berechnen Sie die Fensterbreite und-entfernen aus, dass der linke Abstand und die Breite der popover (actualWidth) selbst und erhalten Sie den Abstand von der rechten.

Dann, stellen Sie sicher, dass Sie zum zurücksetzen des offset Links und die richtige Positionierung. Aber... es nur sorta funktioniert - das heißt, es funktioniert nur beim zweiten mal.

Check it out für sich selbst! Hover mal, und es ist fehl am Platz, ziehen Sie die Maus auf die Seite und versuchen Sie es erneut und plötzlich ist es richtig positioniert. Was zur Hölle?

Bearbeiten

Ok das scheint zu kommen, eine Menge, so werde ich es machen klar:

Weiß ich über auto Platzierung. Ich will es nicht. Ich möchte, um zu kontrollieren, wo das popover geht, lassen Sie es entscheiden, automatisch ist nicht eine Lösung für das problem, es ist lediglich die Vermeidung es

Ich habe die css-Tags. Ich bin einigermaßen vermute, es steht in keinem Zusammenhang mit bootstrap, sondern um das Standardverhalten des rechts-Links-css-Attribute...
In der Tat - wenn ich right: ... auf die popover (Sie wissen schon, statt der üblichen linken) es funktioniert genauso wie der Links-Zuordnung, d.h., AUFTRAGGEBER in der Nähe der Kanten. Was zur Hölle ist dieses Phänomen?
Haben Sie versucht, die Einstellung für Links und rechts offsets?
Nein, aber warum sollte das helfen? Die ganze Sache ist gebaut, um die Berechnung, die Dinge aus einer Richtung. Wenn ich wollte, ein Recht ausgeglichen, es würde auch bedeuten, alles mit ihm zu arbeiten. Und es ist unnötig, ich brauche nur zu berechnen, die Dinge aus einer Richtung, wirklich. Es ist nur so, dass ich hinzufügen müssen, um eine Platzierung in right in bestimmten Fällen (siehe meine zweite demo)
Ist es nicht möglich, den richtigen offset zu keiner?
Im nur neugierig, ob es ist die Eigenschaft auf das Objekt, das bewirkt, dass der browser sich anders Verhalten. Ich habe gesehen, seltsamer Kram, dass in css. So, ich wollte nur helfen.
Btw, könnte man nicht wechseln zwischen dem linken und rechten tool-Tipp je nachdem, ob der tool-tip, der ist außerhalb des Bildschirms, oder nicht? Das wäre wirklich nett. 😀
Ich habe keine Ahnung, warum die Einstellung rechts-Versatz zu keiner (oder irgendetwas anderes für diese Angelegenheit) haben keine Wirkung. Du bist mehr als willkommen, um meine Gabel demo und Chaos mit sich, ob Sie haben eine Idee, wie das Problem zu lösen. Ich habe keine Ahnung, was du meinst mit "die-Eigenschaft auf das Objekt, das bewirkt, dass der browser...". Das problem ist cross-browser und bezieht sich auf css (ich habe es erklärt sehr ausführlich). Als par-Ihrem letzten Kommentar, schauen Sie sich meinen letzten edit.
Ich Durcheinander herum ein wenig.
Es scheint, dass Sie gelöst habe ist die Frage. Gibt es irgendetwas, was Sie noch brauchen, helfen Sie mit, oder sind unklar?
Nein habe ich nicht. Es ist fast da - es funktioniert nur auf der zweiten hover (siehe mein Kommentar für Alexander unten)
Ich bin nicht mit jQuery UI (und ich habe nicht vor zu), ich bin mit bootstrap. Es ist in den Titel der Frage, sheesh
bitte Lesen Sie die Frage. Der link, den Sie hat nichts zu tun mit dem Problem, mit dem ich Rede (es bezieht sich auf das halten der tooltip in der Ansicht beim scrollen oder bewegen Sie die Maus, ich spreche inkonsistente Positionierung in der Nähe der Ränder des Bildschirms).
Das Problem besteht in var actualHeight on line 157. Wenn man sich diese fiddle: jsfiddle.net/ctwheels/gwbR2/25 und Sie schweben ein element, Sie werden sehen, die actualHeight variable Veränderungen von der ersten zur zweiten hover (aus dem Wert von 134 bis 486). Wenn Sie hartcodieren den Wert 134 in Ihre actualHeight, erhalten Sie die Ergebnisse, die Sie suchen, aber ich nehme an, Sie wollen nicht zu hart codierten Variablen.
Hinzufügen zu meinem vorherigen Kommentar, wenn Sie die Zeile ändern var actualHeight = $tip[0].offsetHeight zu var actualHeight = $(window).offsetHeight Sie erhalten auch das Ergebnis, die Sie suchen

InformationsquelleAutor yuvi | 2014-07-15

1

Ok, ich habe mittlerweile ein wenig näher.

Einmal weisen Sie die right im css, die actualWidth und actualHeight ändern, so dass Sie müssen aktualisieren Sie die Variablen. Um die Linie 253 in deinem jsfiddle:
```
if (placement == 'left' && offset.left < 0) {
    var right = (  $(window).width() + 10) - ( offset.left + actualWidth ); 

    offset.left = 0;
    $tip.offset(offset);
    $tip.css({ 'right': right });
    actualWidth  = $tip[0].offsetWidth;
    actualHeight = $tip[0].offsetHeight;
}
```
Funktioniert dies das erste mal, Sie schweben, aber jedes mal, nach diesem, es setzt die top zu hoch zu sein, so dass Sie nicht Lesen können, die oben im tooltip.

UPDATE:
Es scheint, dass die right Wert eingestellt ist, vermasselt die Positionierung in der applyPlacement Funktion. Um dies zu beheben, deaktivieren Sie die right Wert vor dem setzen der ersten actualWidth und actualHeight (ca. ab Zeile 225):
```
$tip.css({ 'right': '' });
//check to see if placing tip in new offset caused the tip to resize itself
var actualWidth  = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight
```
- JA! Das ist es! Danke Mann. " Final Demo. Ich brauchte nicht einmal die aktualisierte Lösung, denn es scheint zu wirken ohne es zu sein. Bounty wird ausgezeichnet kurz.
- Nein. Ich nehme das zurück, die Korrektur war notwendig. Eigentlich Finale-DEMO. Fantastische Antwort.
InformationsquelleAutor AJ Richardson
0

Ich glaube, das hat viel zu tun mit der browser/client, greift auf die Webseite. Zum Beispiel, um die Spitze auf der richtigen Seite (nicht gebündelt oder unleserlich aus, die Links oder rechts), ermitteln offsetLeft & offsetTop des object-Elements mit javascript und platzieren Sie entsprechend. Sie kann verschiedene Seiten für verschiedene Auflösungen.

CSS-Beispiel für eine Bildschirmbreite von 400-720 Pixel:
```
@media screen and (min-width:400px) and (max-width:721px)
```
einige pseudo-code:
```
if (this.offsetLeft < 200)   //if there's not enough room to display the tip
tip.offsetLeft += 200;
```
InformationsquelleAutor simpleb

-1

Ich glaube, du hast im Grunde habe es, es funktioniert gut für mich.

Nur in der Mindestbreite Erkennung, so dass es nicht zu klein ist.

if (/bottom|top/.test(placement)) {
  var delta = 0

  if (offset.left < 0) {
    delta       = offset.left * -2
    offset.left = 0

    $tip.offset(offset)

    actualWidth  = $tip[0].offsetWidth
    actualHeight = $tip[0].offsetHeight
  } 

  this.replaceArrow(delta - width + actualWidth, actualWidth, 'left');

} else {
    if (placement == 'left' && offset.left < 0) {
        var right = (  $(window).width() + 10) - ( offset.left + actualWidth ); 

        offset.left = 0;
        $tip.offset(offset);
        $tip.css({ 'right': right });
    }

    this.replaceArrow(actualHeight - height, actualHeight, 'top');    
}

Das ist der code, den ich schrieb. Und es ist fast arbeiten. Wenn man sich closly an der demo habe ich, Sie werden sehen, dass es nicht die Arbeit an der ersten zu schweben, aber dann hat es das zweite mal. Es ist schwer zu verpassen, weil es eine Menge von Symbolen gibt, aber eine nehmen, die nicht komplett auf die Seite (das vierte von Links) und du wirst es sehen (schauen Sie genau auf den Pfeil).
Ja, es ändert sich von der ersten hover die zweite. Ich nehme einen Blick an diesem Nachmittag.

InformationsquelleAutor Alexander Wigmore

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.