![\"HTML_tooltip\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/07\/HTML_tooltip.png\")
\n(Image by Nikola Smolenski<\/a>)<\/p>\n
Traditionally, you can use simple HTML to create these tool tips, as in the example above. However, CSS tool tips will elevate the amount of support that you can provide your visitors.<\/p>\n
With basic HTML, the tool tips appear automatically with no animations and no positioning. Using CSS, you have control over what they look like, where they\u2019re positioned, and even whether they will have an arrow pointing to the element or not. In the example below, we have programmed the tool tip to appear below the sample text, with a black background, and an arrow pointing up.<\/p>\n
![\"hover-example\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/07\/hover-example.jpg\")
<\/p>\n
Basic Tool Tip<\/h2>\n
As with most CSS tricks, you will need to define things in both the style sheet (external or within the web page) as well as within the body of the web page.<\/p>\n
Here is a sample piece of code for a basic tool tip:<\/p>\n
<style>\n\n\/* Tooltip container *\/\n\n.tooltip {\n\nposition: relative;\n\ndisplay: inline-block;\n\nborder-bottom: 1px dotted black; \/* If you want dots under the hoverable text *\/\n\n}\n\n\/* Tooltip text *\/\n\n.tooltip .tooltiptext {\n\nvisibility: hidden;\n\nwidth: 120px;\n\nbackground-color: black;\n\ncolor: #fff;\n\ntext-align: center;\n\npadding: 5px 0;\n\nborder-radius: 6px;\n\n\/* Position the tooltip text - see examples below! *\/\n\nposition: absolute;\n\nz-index: 1;\n\n}\n\n\/* Show the tooltip text when you mouse over the tooltip container *\/\n\n.tooltip:hover .tooltiptext {\n\nvisibility: visible;\n\n}\n\n<\/style>\n\n<div class=\"tooltip\">Hover over me\n\n<span class=\"tooltiptext\">Tooltip text<\/span>\n\n<\/div><\/pre>\nIn the above example, there are two parts at play \u2013 the HTML<\/strong> part and the CSS<\/strong> part.<\/p>\nFor the HTML portion, you need to create a container element such as <div><\/strong> and then add a class to it, in this case we used \u201ctooltip<\/strong>\u201d.<\/p>\nSeparately, the tool tip in itself is within an inline element (<span> <\/strong>in this example, with class \u201ctooltiptext<\/strong>\u201d).<\/p>\nFor the CSS portion, the classes you have specified in HTML are defined here. In this example, the tooltip<\/strong> class uses position:relative <\/strong>(which you can change to position:absolute<\/strong> to define where the tool tip would appear).<\/p>\nWe have also used the CSS3 border-radius<\/strong> property to make the corners rounded<\/a>, creating a nice smooth border.<\/p>\nLastly, the :hover <\/strong>selector tells the web page to show the tool tip when your mouse hovers over the <div class=”tooltip”><\/strong>.<\/p>\nPositioning the Tool Tips<\/h2>\n
It\u2019s easy to move the tool tip\u2019s position using CSS, to the left or right, or to the top and bottom<\/a>. All you need to do is define them like in the example codes below:<\/p>\nPositioned Right<\/h3>\n.tooltip .tooltiptext {\n\ntop: -5px;\n\nleft: 105%;\n\n}<\/pre>\nPositioned Left<\/h3>\n.tooltip .tooltiptext {\n\ntop: -5px;\n\nright: 105%;\n\n}<\/pre>\nPositioned at the Top<\/h3>\n
Use margin-left<\/strong> by defining half of the tool tip\u2019s width to center the tool tip. In this example, half of 120px is 60, so margin-left<\/strong> is -60px<\/strong>.<\/p>\n.tooltip .tooltiptext {\n\nwidth: 120px;\n\nbottom: 100%;\n\nleft: 50%;\n\nmargin-left: -60px;\n\n}<\/pre>\nPositioned at the Bottom<\/h3>\n
You can center the tool tip in the same manner as positioning tool tips at the top.<\/p>\n
.tooltip .tooltiptext {\n\nwidth: 120px;\n\ntop: 100%;\n\nleft: 50%;\n\nmargin-left: -60px;\n\n}<\/pre>\nThere are many other cool things you can incorporate into a tool tip, all of which draw more attention and improve user experience in a way that basic HTML can’t. Once you learn other elements like borders and animation<\/a> (using transition and opacity), you’ll be able to make your tool tips even more attractive. So have fun with it and keep learning!<\/p>\n