{"id":135,"date":"2013-05-11T04:59:39","date_gmt":"2013-05-11T04:59:39","guid":{"rendered":"http:\/\/www.cssportal.com\/blog\/?p=135"},"modified":"2024-02-28T23:45:31","modified_gmt":"2024-02-28T23:45:31","slug":"css-tooltips","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/css-tooltips\/","title":{"rendered":"CSS Tooltips"},"content":{"rendered":"

Have you ever wanted to create toolips with just CSS code? Like many people the answer is yes. In this tutorial we will go through the process and show you exactly how this can be done without using any javascript or images, only pure CSS code. Firstly let’s explain what a tooltip is: A tooltip is a brief message that will appear when you hover over a link, this message might be a simple sentence explaining where the link will take us or just stating some relevant information about the link.<\/p>\n

In this tutorial we will cover the basics of creating the CSS tooltips, I will write another tutorial later about adding animations, borders and shadows to the tooltips and different positions for the arrow on the tooltip. Also hopefully within a few weeks, we will be adding a CSS tooltip generator to this website, you’ll then be able to create your own tooltips with ease.<\/p>\n

OK, let’s get on with showing you how to create these wonderful tooltips as shown in the image below.<\/p>\n

\"CSS<\/a><\/p>\n

Step 1<\/h3>\n

To start our tooltip, we need to create a CSS class.<\/p>\n

a.tooltip {\r\n    position: relative;\r\n    display: inline-block;\r\n}<\/code><\/pre>\n
position: relative;<\/span> – Our tooltip position will be relative to our class.
\ndisplay: inline-block;<\/span> – Our tooltip class will display inline.<\/p>\n
Step 2<\/h3>\n
Here we will start to create the actual tooltip container.<\/p>\n
a.tooltip span {\r\n    position: absolute;\r\n    left: 50%;\r\n    width:140px;\r\n    padding: 6px;\r\n    margin-left: -76px;\r\n    background: #000;\r\n    color: #fff;\r\n    text-align: center;\r\n    visibility: hidden;\r\n    border-radius: 5px;\r\n}<\/code><\/pre>\n
position: absolute;<\/span> – Our tooltip will be have a position of absolute.
\nleft: 50%;<\/span> – This will position our tooltip centered at the end of our element.
\nwidth: 140px;<\/span> – Our tooltip container will have a width of 140px.
\npadding: 6px;<\/span> – There will be padding around our text of 6px.
\nmargin-left: -76px;<\/span> – This number will center our tooltip with the element.
\nbackground: #000;<\/span> – The background of our tooltip will be black.
\ncolor: #fff;<\/span> – The text color will be white.
\ntext-align: center;<\/span> – The text in the tooltip will be centered.
\nvisibility: hidden;<\/span> – This will set our tooltip container to hidden.
\nborder-radius: 5px;<\/span> – This will give our container a border radius of 5px.<\/p>\n
Step 3<\/h3>\n
Now that we have created our tooltip container, we can now add a triangle to the tooltip using the :after selector.<\/p>\n
a.tooltip span:after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 50%;\r\n    margin-left: -8px;\r\n    width: 0; height: 0;\r\n    border-top: 8px solid #000;\r\n    border-right: 8px solid transparent;\r\n    border-left: 8px solid transparent;\r\n}<\/code><\/pre>\n
content: ”;<\/span> – Sets the content to nothing.
\nposition: absolute;<\/span> – The arrow will be positioned absolute.
\ntop: 100%;<\/span> – Positions the arrow at the bottom of the tooltip.
\nleft: 50%;<\/span> – The arrow will be in the center of the tooltip.
\nmargin-left: -8px;<\/span> – Because our arrow is 16px wide, we need to shift the arrow -8px to get it back to center.
\nwidth: 0; height: 0<\/span> – Sets the width and height to zero.
\nborder-top: 8px solid #000;<\/span> – Gives the arrow a background of black.
\nborder-right: 8px solid transparent;<\/span> – Used to create the arrow.
\nborder-left: 8px solid transparent;<\/span> – Used to create the arrow.<\/p>\n
Step 4<\/h3>\n
Finally we need to set the properties for when the user hovers over the link element.<\/p>\n
a:hover.tooltip span {\r\n    visibility: visible;\r\n    opacity: 0.8;\r\n    bottom: 30px;\r\n    z-index: 999;\r\n}<\/code><\/pre>\n
visibility: visible;<\/span> – Shows the tooltip when the user hovers over the link.
\nopacity: 0.8;<\/span> – Gives the tooltip an opacity of 0.8
\nbottom: 30px;<\/span> – Moves the tooltip to above the element.
\nz-index: 999;<\/span> – The z-index will make sure that the tooltip is in front of other elements.<\/p>\n
Step 5<\/h3>\n
All of our CSS is now completed, with the code above that is all that is required for the style of the tooltip, however, we now need to add some HTML to show you how to achieve the tooltip when a user hovers over a link element.
\nAll we need to do is add the .tooltip class to our link to activate our tooltip, plus will need to add a <span> element for the text used in our tooltip.<\/p>\n
<a class=\"tooltip\" href=\"#\">Hover over me!<span>Pure CSS Tooltips<\/span><\/a><\/xmp><\/code><\/pre>\n<h3>Conclusion<\/h3>\n<p>That is all, I hope you enjoyed reading this tutorial about CSS tooltips, you can view a demo of the above code by clicking on the demo button below or you can download the entire source code for the tooltips by clicking on the download button.<\/p>\n<p><a target=\"_blank\" class=\"btn btn-primary\" href=\"http:\/\/www.cssportal.com\/tryit\/index.php?file=blog\/csstooltips\" rel=\"noopener\">Demo<\/a><\/p>\n<p><a class=\"btn btn-primary\" href=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2013\/05\/tooltips.zip\">Download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever wanted to create toolips with just CSS code? Like many people the answer is yes. In this tutorial we will go through the process and show you exactly how this can be done without using any javascript or images, only pure CSS code. Firstly let&#8217;s explain what a tooltip is: A tooltip [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":652,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-135","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":3,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/135\/revisions"}],"predecessor-version":[{"id":653,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/135\/revisions\/653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media\/652"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}