How to make this div element the size of the img contained within it? [css] [migrated]


I am attempting to create a tooltip, to appear when hovering on an image within a table. However when I add the div to put a container for the tooltip, it adds extra spacing to my table, as seen in the first row (not applied to subsequent rows).

Why is the div 118 x 66 size as shown instead of the size of the image within it (59×59 )? It creates unnecessary spacing.

Oversized horitionzal dimension

html

CSS for tooltip

Tooltip in action