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:
http://pasteboard.co/2mu6XkXO.jpg
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
…
$(“.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.
…
.cardHoverTooltip {
font-size:16px !important;
max-width:250px !important;
color: #cc66cc !important;
margin:20px !important;
}
…