jQuery UI-Tooltip mit einem Bild hat eine falsche Position

Question

I have a jsfiddle here.

$(document).tooltip({ 
     items : "[title]", 
     position : { 
      my: "left+35", 
      at: "right+10", 
      collision: "flipfit" 
     }, 
     content : function() { 
      var cache = new Date().getTime(); 

    // Uncomment this next line and the tooltip looks correct after the image is retrieved 
    //cache = ""; 

      return '<img src="https://g.foolcdn.com/editorial/images/225916/getty-apple_large.jpg?' + cache + ' width="600">'; 
     }, 
     open : function(event, ui) { 
      ui.tooltip.css("min-width", "600px"); 
     } 
    }); 

Ich versuche, einen Tooltip mit einem Bild im Inneren zu zeigen. Es scheint, dass die Position des Tooltips falsch ist, wenn der Browser das Bild zum ersten Mal aufruft. Die Kollisionslogik "flipfit" scheint nicht korrekt angewendet zu werden und der Tooltip ist außerhalb des sichtbaren Bereichs falsch positioniert.

Wenn Sie meine JavaScript Zeile Kommentar-, dass der Browser eine Cache-Version des Bildes zu verwenden, ermöglicht es, der Tooltip-Displays in der gewünschten Position, vollständig sichtbar.

Gibt es eine Möglichkeit JQuery UI zu bekommen, um richtig die Position zu berechnen? Ich habe viele Dinge ausprobiert und kann es nicht zum Laufen bringen.

Answer 1

Ich fand eine Lösung. Wenn ich für den Bildinhalt sowohl eine Breite als auch eine Höhe festlege, ist die Positionierung korrekt. Ich habe nur die Breite vorher benutzt, da die Höhe zwischen den verschiedenen Bildern variiert, die ich zeigen könnte. Dies ermöglicht eine korrekte Berechnung der Position. Um die Bilder unterschiedlicher Größe zu kompensieren, habe ich das css "object-fit: cover" zum Bild hinzugefügt, wodurch es zentriert und beschnitten werden kann, um an die feste Größe des Tooltip-Fensters angepasst zu werden.

var image = 'https://g.foolcdn.com/editorial/images/225916/getty-apple_large.jpg'; 

    $(document).tooltip({ 
     items : "[title]", 
     position : { 
      my: "left+35", 
      at: "right+10", 
      collision: "flipfit" 
     }, 
     content : function(event, ui) { 
       return '<img src="' + image + '" width="600" height="400" style="object-fit: cover;">'; 
     }, 
     open : function(event, ui) { 
      ui.tooltip.css("min-width", "600px"); 
     } 
    }); 

Answer 2

Ich glaube, dass Ihre Positionierung möglicherweise ungültig ist. Ich kenne nur gültige Werte wie left center, left top, left bottom, right top, right center, right bottom, top right, top center, top left, bottom left, bottom center, bottom right.

Denken Sie daran, dass Ihr Container und das Bild außerhalb des Bildschirms geladen und sichtbar sein sollten, bevor Sie es positionieren. Wenn Sie ein unsichtbares Element positionieren, das nicht die richtige Größe erreicht hat, erhalten Sie seltsame Positionen. Stellen Sie sicher, dass Ihr Bild geladen ist und Ihr Container vor der Positionierung sichtbar ist.