Creating simple HTML5, CSS and jQuery tooltips
The layout guru is unlikely to find anything new for himself in this post. This post is more likely for beginner designers who, like me, had problems creating and styling universal pop-up prompts.
Recently, when I was making a small blog, I was faced with the task of making stylish, but at the same time simple, tooltips. Having tried different ways of creating separate div containers for hints, or creating tooltips in pure CSS, I found a universal solution that will not clutter up the code, be cross-browser, and at the same time be very simple to implement.
Anyone who is interested in my way to solve this simple problem, please under the cat.
')
The method that I will offer you is quite simple and effective. Works in all browsers, even in І 6 (Repeatedly tested by me). Easy to change and convenient. Does not clutter the code and makes it vivid. It can be easily changed to your needs. For example, to make a delay in displaying hints via setTimeout or another.
Suppose we have an HTML page with a link, when hovering over which we need to display a hint:
As you may have noticed from the listing, I use the css-preprocessor LESS.
We have included CSS styles and scripts in separate files. We also have one link and a div block, which will be the container for the tooltip.
The HTML5 specification allows the use of custom data-atribute attributes in which you can store certain information about an element or a block. It is in the data-attributes that we will save the text of the tooltips.
For storage, I use the data-tooltip attribute.
C HTML is finished - you can go to the styles.
I use the LESS Elements library and advise everyone, so I’ll write some properties using this framework.
From the listing it is clear that in the first line we connect LE, set the absolute positioning to the div # tooltip block and hide it. Next, we set the background color and text color to the block, make rounding corners (5px) and set the transparency value to 50%.
Well, now the most interesting is jQuery.
Now we add all the elements with the data-tooltip attribute to the selection and when we hover over the desired element with the mouse, we get the value of the tooltip and save it in a variable. Next, add the text of the tooltip to the #tooltip block, give it the coordinates of the cursor from the edge of the page + 5 px and finally draw the block with the tooltip in the right place. After the mouse leaves the element, we hide the #tooltip block, clean its contents and return to 0; 0 ;.
That's all!
As a result, we get something like this: Demo
Thanks to such a simple script, all elements on the page that have the data-tooltip attribute will receive a hint.
Thanks for attention!
Recently, when I was making a small blog, I was faced with the task of making stylish, but at the same time simple, tooltips. Having tried different ways of creating separate div containers for hints, or creating tooltips in pure CSS, I found a universal solution that will not clutter up the code, be cross-browser, and at the same time be very simple to implement.
Anyone who is interested in my way to solve this simple problem, please under the cat.
')
Decision
The method that I will offer you is quite simple and effective. Works in all browsers, even in І 6 (Repeatedly tested by me). Easy to change and convenient. Does not clutter the code and makes it vivid. It can be easily changed to your needs. For example, to make a delay in displaying hints via setTimeout or another.
HTML
Suppose we have an HTML page with a link, when hovering over which we need to display a hint:
<!DOCTYPE html> <html> <head> <title> </title> <meta charset="utf-8" /> <link href="style.less" rel="stylesheet/less" type="text/css" /> <script type="text/javascript" src="js/less.lib.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="scripts.js"></script> </head> <body> <a href="#" ></a> <div id="tooltip"></div> </body> </html> As you may have noticed from the listing, I use the css-preprocessor LESS.
We have included CSS styles and scripts in separate files. We also have one link and a div block, which will be the container for the tooltip.
The HTML5 specification allows the use of custom data-atribute attributes in which you can store certain information about an element or a block. It is in the data-attributes that we will save the text of the tooltips.
<a href="#" alt="" data-tooltip=" "></a> For storage, I use the data-tooltip attribute.
C HTML is finished - you can go to the styles.
CSS
I use the LESS Elements library and advise everyone, so I’ll write some properties using this framework.
@import "css/elements.less"; #tooltip { z-index: 9999; position: absolute; display: none; top:0px; left:0px; background-color: #000; padding: 5px 10px 5px 10px; color: white; .opacity(0.5); .rounded(5px); } From the listing it is clear that in the first line we connect LE, set the absolute positioning to the div # tooltip block and hide it. Next, we set the background color and text color to the block, make rounding corners (5px) and set the transparency value to 50%.
jQuery
Well, now the most interesting is jQuery.
$.jQuery(document).ready(function() { $("[data-tooltip]").mousemove(function (eventObject) { $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip").text($data_tooltip) .css({ "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 }) .show(); }).mouseout(function () { $("#tooltip").hide() .text("") .css({ "top" : 0, "left" : 0 }); }); });// Ready end. Now we add all the elements with the data-tooltip attribute to the selection and when we hover over the desired element with the mouse, we get the value of the tooltip and save it in a variable. Next, add the text of the tooltip to the #tooltip block, give it the coordinates of the cursor from the edge of the page + 5 px and finally draw the block with the tooltip in the right place. After the mouse leaves the element, we hide the #tooltip block, clean its contents and return to 0; 0 ;.
That's all!
As a result, we get something like this: Demo
Thanks to such a simple script, all elements on the page that have the data-tooltip attribute will receive a hint.
Thanks for attention!
Source: https://habr.com/ru/post/165805/
All Articles