イメージを含むjQuery UIのツールチップに間違った位置があります

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"); 
     } 
    }); 

イメージが入ったツールチップを表示しようとしています。ブラウザが最初にイメージを取得している場合、ツールチップの位置が間違っているようです。 「フリップフィット」コリジョンロジックが正しく適用されていないようで、ツールチップが表示可能領域外に正しく配置されていません。

ブラウザは、所望の位置にツールチップが表示されたら、完全に可視画像のキャッシュされたバージョンを使用することができます私のJavaScriptの行のコメントを解除した場合。

jQueryのUIが正しく位置を計算するために取得する方法はありますか？私は多くのことを試みましたが、それを働かせることはできません。

Answer 1

解決策が見つかりました。画像のコンテンツの幅と高さの両方を指定すると、位置が正しくなります。高さは私が示すかもしれないさまざまなイメージの間で変わるので、私は前に幅を使用していました。これにより、位置が適切に計算されます。さまざまなサイズの画像を補正するために、画像にcss "object-fit：cover"を追加しました。これは、固定されたツールチップウインドウのサイズに合わせて中央揃えとトリミングを可能にします。

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

私はあなたのポジショニングが無効かもしれないと信じています。私は今までleft center, left top, left bottom, right top, right center, right bottom, top right, top center, top left, bottom left, bottom center, bottom rightのような有効な値を知っていました。

コンテナと画像は、設置する前にスクリーンから外して見えるようにしてください。適切なサイズに達していない目に見えない要素を配置すると、あなたに奇妙な位置が与えられます。あなたのイメージがロードされていることを確認してから、コンテナを表示してから配置してください。