Here’s a way that does it using the built-in ellipsis setting, and adds the title attribute on-demand (with jQuery) building on Martin Smith’s comment: $(‘.mightOverflow’).bind(‘mouseenter’, function(){ var $this = $(this); if(this.offsetWidth < this.scrollWidth && !$this.attr(‘title’)){ $this.attr(‘title’, $this.text()); } });
Almost 3 years later, I finally made the time to revisit this and post an improved version. You can still view the original answer at the end for reference. While SVG may be the better choice, especially today, my goal with this was to keep it just HTML and CSS, no JS, no SVG, no … Read more
The latest specification allows line feed characters, so a simple line break inside the attribute or entity (note that characters # and ; are required) are OK.
Simply add a title to your button. <button title=”Hello World!”>Sample Button</button>
For the basic tooltip, you want: <div title=”This is my tooltip”> like: .visible { height: 3em; width: 10em; background: yellow; } <div title=”This is my tooltip” class=”visible”></div> For a fancier javascript version, you can look into: https://jqueryhouse.com/best-jquery-tooltip-plugins/ The above link gives you 25 options for tooltips.