CSS3 “Tooltip” with :hover:after positioning and size?

You can force the tooltip onto a single line by using white-space:nowrap I don't know of any way to center the tooltip without forcing a specific width on both the tooltip and the item the tooltip applies to. Here's a general-purpose example (without centering).

You can force the tooltip onto a single line by using white-space:nowrap. I don't know of any way to center the tooltip without forcing a specific width on both the tooltip and the item the tooltip applies to. Here's a general-purpose example (without centering): Lorem ipsum dolor sit amet.

And the CSS: *tooltip { position: relative; border-bottom: dotted 1px #000; } *tooltip:hover:before { content: attr(tooltip); background-color: #000; color: #fff; top: 1em; position: absolute; white-space: nowrap; } Note that I'm using :before instead of :after. If you want to center the tooltip and are able to define a fixed width, you can use this CSS instead: *tooltip { position: relative; display: inline-block; text-align: center; width: 200px; margin: 0 -75px; } *tooltip:hover:before { content: attr(tooltip); background-color: #000; color: #fff; top: 1em; position: absolute; white-space: nowrap; width: 200px; } Here, the item is given a fixed width equal to the width of the tooltip then negative left/right margins to collapse it back down to the desired size. Note the addition of display:inline-block and text-align:center.

This technique isn't practical for inline tooltips, but works well for buttons and "call to action" links.

– J V Nov 24 at 13:42 You can prevent the scroll with overflow-x:hidden on the body, but the tooltip would just be cut off. CSS doesn't have any support for position-aware styles, so the only way to change the behavior near the edge of the window would be with JavaScript. – Brandon Gano Nov 24 at 18:36 All right, I suppose that works.

So the only way to really make such a tooltip work is with javascript? – J V Nov 24 at 18:58 Yes. And there are plenty of tooltip plug-ins available for jQuery or any other JavaScript library.

– Brandon Gano Nov 240 at 20:34.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.