OK. So here's the deal. I'm pulling my hair out trying to figure this one out.

When the user hovers over images, the tooltip sometimes shows up properly positioned and sometimes does this thing where half of it disappears beneath the boundary of the browser window:

Then, as if to mock me, when the cursor leaves and re-hovers, the tooltip shows up properly on the exact same element. 

It should at least be consistently wrong don't you think?

First hover: maybe shows up properly

Second hover: always shows up properly

It is also worth mentioning that when I play around with positioning I often get that hover flicker thing where the cursor can't make up its mind if it is hovering or not.

1. $(".cardHover").tooltip({
   tooltipClass: "cardHoverTooltip",
   position: { my: "left+15 center", at: "right center", collision:"flipfit" },
   content: function () { return $(this).prop('title'); }
   });

 

And here's the CSS. The !important is necessary to override jQuery UI's defaults.

 

1. .cardHoverTooltip {
   font-size:16px !important;
   max-width:250px !important;
   color: #cc66cc !important;
   margin:20px !important;
   }