Question

I am using CSS3 to display a tooltip on the hover of text:

.tooltip {
  position:absolute; /* don't push other text out of the way */
  visibility:hidden;
}
.f:hover .tooltip {
  visibility:visible;
}

This is okay, but if the chunk of text is large it can seem a little strange to hover it in one place and have the tooltip show up in another. Is there a way, without using JavasScript (I know it’s cakewalk with JavaScript), to make the the element show up near the mouse location where it first hovered the text? Something like (conceptual example):

.f:hover:before .tooltip {
  top:mouse-y;
  right:mouse-x;
}

Answer 1

There is no way without javascript. CSS won’t allow you to style elements against the mouse cursor.