The tooltip width exceeds the browser width and when you mouse over the word that contains a tooltip, the tooltip isn’t visible because it’s too wide for the screen. I tried setting the width of the tooltip to 100% but that made the width too narrow. I don’t know how to fix this.
I created a pen here:
Not an answer to your question, but you do realise that all that information is inaccessible to anybody who can’t use a mouse, don’t you?
This is the problem with tool tips and you have to have enough space to the left and the right in order to show your tooltip in full .
There is no css solution to this other than having the tooltip no wider than the trigger element. If you ensure that the trigger element is wide enough then the tooltip can be made to match that size (maybe group 3 words with white-space:nowrap together). The problem is then that the three words will wrap together and give unsightly gaps in the lines.
The only real answer is to use Javascript and determine the available space for the tooltip and then dynamically size and position it. Not a trivial task to do yourself but I’m sure there are ready made tooltip scripts around that will fit the bill 
Maybe this old thread here about aligning CSS tooltip within the width of the parent paragraph box:can give you some new ideas. It uses absolutely auto position to mimic the HTML tooltip/title positon. 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.