JohnF_vbulletin3_import33261
New Member
I have tooltips whose content can range from very long to very short. I don't want to have 3 words' worth of content and have a huge tooltip, but I also don't want 20 words and have it all scrunched up on multiple lines. With this current setup, it stays stuck at the minimum width regardless.The CSS:\[code\].tooltip { outline: none; position: relative; min-width: 75px; max-width: 255px;}.tooltip .tool-content { opacity: 0; visibility: hidden; position: absolute;}.tooltip:hover .tool-content { background: #999; border: 1px solid #555; color: #000000; /* general styling */ position: absolute; left: 1.3em; top: 2.6em; z-index: 99; visibility: visible; opacity: 1;}\[/code\]The HTML:\[code\]<div class='tooltip'>(content to hover) <span class='tool-content'> (tooltip content) </span></div>\[/code\]What troubles me is that I can take off position: relative and it works as intended! Yet I can find no work around, and relative positioning is key (or appears to be?) to having CSS hovers.