A wise smart alec once said: If your text hits the side of the browser, f[...] off forever. You ever see a book like that? Yes? What a s[...] book. Same applies to text inside of a smaller window. I'd suggest changing the CSS for tooltip.top from "5px 0" to just "5 px" Or remove it entirely and let it inherit from tooltip. That looks great, too. The problem you (conceivably might) have is that this moves the arrow on the bottom. Surely there's a better way to position that exactly where you want than utterly destroying the readability and approach-ability of the text you presumably want people to read. Like, just doing whatever math you're already doing to position it, but compensate for the padding.