HTML tooltip and its implementation. Tooltips on hover Tooltip code
From the author: Hello. A tooltip is a small explanatory text that appears when you hover over an element, usually an image. Today we will look at how you can make a tooltip in HTML in different ways.
Standard hintBy default, the title attribute is responsible for displaying explanatory text. It can be used for various elements, but is usually only used for pictures to explain what they show.
In one of the previous articles, I used an image of a tiger to show working with picture sizes. If you don't mind, I'll use this image again. So, to display a hint, you just need to add the title attribute and write the desired text in it.
< img src = "tiger.jpg" title = "It's a tiger" > |
There can be either one word or several sentences. And this is what it looks like:
The hint appears smoothly, not immediately after hovering, but after some time. This is the default behavior.
The main problem with such a tooltip is that it cannot be stylized. How to solve this problem? We'll have to give a hint in other ways. Now I'll show you a couple.
Pure css methodA very interesting way that allows you to beautifully display a hint for an image. The HTML markup is simple, only the image needs to be enclosed in a block container, to which we will assign an identifier so that we can later refer to it in styles:
< div id = "tiger" data - name = "Суматранский тигр" > < img src = "tiger.jpg" > < / div > |
The only thing that may be unclear to you here is the data-name attribute. The thing is that this is a so-called data attribute, which by itself does not do anything, but its value can be used in css and javascript, which makes it useful in some cases. You will see this next.
So, first, let's describe the styles for the container. We need relative positioning because we will absolutely position the block with explanatory text so that the positioning occurs relative to the parent block, and not the entire page.
#tiger( position: relative; display: inline-block; )
#tiger( position: relative; display: inline - block; |
Block-line display will prevent the block (and with it the block with the tooltip that we will create) from stretching across the entire width of the window. All that remains is to create the hint itself. In CSS it is very convenient to do this using pseudo-elements. Like this:
#tiger:hover:after ( content: attr(data-name); position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,.55); color: #fff; text-align: center ; font-family: cursive; font-size: 14px; width: 100% )
#tiger:hover:after ( content: attr (data - name); position: absolute; left: 0; bottom: 0; background: rgba(5, 13, 156, . 55); color : #fff; text - align : center ; font - family : cursive ; font-size: 14px; padding: 3px 0; width: 100%; |
There is a lot of code, but there is nothing complicated here. The #tiger:hover:after selector means the following: when we hover over a block with an image, we need to create an after pseudo-element (and then the rules are listed in curly braces). The content: attr(data-name) property sets the text value of the block. It will be equal to what is written in the data-name attribute of the image wrapper block.
This tooltip appears when you hover over the image, but unlike the standard one, it does this abruptly, and the appearance itself occurs immediately at the moment of hovering. In this case, it will not be possible to implement a smooth transition, because smooth transitions are not supported for pseudo-elements.
Method 2. Pure css and smooth appearanceHowever, by rewriting the code quite a bit, you can achieve a smooth appearance of the tooltip, and, again, without using javascript.
To see for yourself the 2 effects that I will show you next, I recommend opening Notepad or any convenient code editor and repeating everything after me. True, for this you still need to include a style file, although styles can also be written in html in tags
So, the code for this example will be a little different, and that's because we won't be using a pseudo element. It was because of this that it was impossible to apply smooth changes. This time the code will look like this:
Sumatran tiger
< div id = "tiger2" > < img src = "tiger.jpg" > < div class = "text" >Sumatran tiger< / div > < / div > |
The CSS code has not undergone any huge changes:
#tiger2( position: relative; display: inline-block; ) #tiger2 .text ( transition: all 0.6s; opacity: 0; position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,. 55); color: #fff; font-family: cursive; padding: 3px 0; transform: scale(0); (opacity: 1; )
#tiger2( position: relative; display: inline - block; #tiger2 .text ( transition: all 0.6s; transform:scale(0); #tiger2:hover.text( opacity: 1; |
We remove only the content property, since it is only supported by pseudo-elements. We add the transition property, which creates smooth state transitions. Well, opacity: 0 will give our tooltip block full transparency, so it will not be visible on the page.
When hovering over a block, it is now enough to return the normal transparency to the block with a tooltip. Ready. You can check that the element appears smoothly.
Using css3 you can hide an element in another way. Using transformations, for example. Replace full transparency with this property: transform: scale(0) and the block size will be reduced to zero, so it simply won’t be on the screen. When you hover over a block with a picture, you should return the normal size like this: transform: scale(1). In this case, the appearance effect will look even more beautiful. You can see this for yourself.
As you can see, in css the tooltip can also appear slowly with beautiful effects.
Other waysjQuery can give you even more possibilities. Using this library, you can write code to display a hint either yourself or find some plugin that already implements this.
For example, the Bootstrap framework also has many ready-made components, and one of them is tooltips. You can look in the documentation for the framework for code examples that allow you to create these same hints and use them. It is not necessary to connect the entire Bootstrap; you can generally leave only such a component as tooltips, download and connect only that.
In general, today I showed you ways in CSS to make a beautiful tooltip with a sharp and smooth appearance; in addition, you have Bootstrap and jQuery in your arsenal. Choose anything and implement interesting and beautiful tips on your sites!
In this article I want to discuss several options for organizing such a feature in any layout. By the way, I already have a live example of such an implementation on my website. If you scroll down to the comments on this page and hover over the date of the comment, it will immediately become clear exactly what is being said. Well, if there are no comments yet, you can leave one at the same time.
I see two main methods for implementing a tooltip, this is on hover, which is also the most popular, and the less popular when you click on an element. Let's start naturally with the appearance of a tooltip when you hover over an element.
In this article, I thought I’d start with the most primitive thing, displaying a hint using title , which can’t be formatted in any way, but I think you can skip it, since it’s already clear. If the above is not entirely clear to you, I think that after studying the video about, everything will become much clearer.
A simple way with design, on hover.It's no more complicated than the method I missed. Only instead of the title attribute I will use data-title and design using css styles. Actually, I give below the html code:
?
/* We use the after pseudo-element to design the bar itself, but at the same time we hide it, since it should only appear on hover */ .hover:after (content: attr(data-title); display: none;position: absolute; bottom: 130%; left: 0px; background-color: #fff; padding: 5px; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16) ; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;) / * Add a property so that when you hover over an element, a hint box appears */ .hover:hover:after(display: block;)
Here I would like to draw your attention to the fact that this is only an example of design properties. You can naturally design the appearance of the die as you please.
Tooltip on hover.This is perhaps the most popular way to implement this feature. At least that's what I use most often.
? this is a design tip
In this example, I also don’t see anything special, but more, but the result will be better even without using the data-title attribute. The container in this case serves as a wrapper for our elements that will be used to implement the tooltip. And also the die itself will be positioned relative to the container.
/* set relative positioning to the container */ .block(position:relative;) /* Design the hidden element by default */ .hidden (display: none; position: absolute; bottom: 130%; left: 0px; background-color: # fff; color: #3aaeda; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); (0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;) /* Additional decoration for the hidden element (optional) */ .hover + .hidden:before (content: " "; position: absolute; top: 98%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent; z-index: 2;) /* Additional decoration for the hidden element (optional) */ .hover + .hidden :after (content: " "; position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;) /* Appearance of a hidden element on hover */ .hover:hover + .hidden(display: block;)
These two options can be used on your website to display a tooltip when you hover the cursor.
There are two more methods, but they are almost identical, except that the element will appear when you click on an element that is always displayed on the site.
A simple way with registration, on click.In the case of a click, the code will look exactly the same. The only thing is that for convenience I replaced the class of some elements. The focus pseudo-class is also used instead of hover . It is also worth noting that for this method to work, it is necessary to replace it with , that is, with a hyperlink.
?
The CSS code in this case is similar to the appearance of a block on hover, only other classes are used for convenience. And for proper operation, we change the pseudo-class to focus .
/* We use the after pseudo-class to design the spot itself, but at the same time we hide it, since it should only appear when clicked */ .focus:after (content: attr(data-title); display: none; position: absolute; bottom: 130%; left: 0px; background-color: #fff; padding: 5px; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16) ; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;) / * Add a property so that when you click on an element, a hint box appears */ .focus:focus:after(display: block;)
As you can see, there is practically no difference.
Tooltip when clicked.This click method will also be more relevant if you need to format the tooltip a little better than is possible in the previous option.
? this is a design tip
And the actual design of the die:
/* set relative positioning to the container */ .block(position:relative;) /* Design the hidden element by default */ .hidden (display: none; position: absolute; bottom: 130%; left: 0px; background-color: # fff; color: #3aaeda; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); (0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;) /* Additional decoration for the hidden element (optional) */ .focus + .hidden:before (content: " "; position: absolute; top: 98%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent; z-index: 2;) /* Additional decoration for the hidden element (optional) */ .focus + .hidden :after (content: " "; position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;) /* Appearance of a hidden element when clicked */ .focus:focus + .hidden(display: block;)
As you can see, there is nothing complicated. In addition, you can organize state changes both by hover and by click. Although, to be honest, I can’t say how relevant the click-to-click method is.
There is also an imitation of the last example using , but its use seems to me not entirely correct specifically for organizing a tooltip on your website. If you strongly disagree with me, welcome to the comments.
Video lesson - Tooltip without scripts.That's all for me. Good luck everyone.
Layout gurus are unlikely to find anything new for themselves in this post. This post is more for beginner layout designers who, like me, had problems creating and styling universal tooltips.
Recently, when I was making a small blog, I was faced with the task of making stylish, but at the same time simple tooltips. After trying different ways of creating separate div containers for tooltips, or creating tooltips with pure CSS, I found a universal solution that will not clutter the code, will be cross-browser compatible, and at the same time will be very simple to implement.
Anyone who is interested in my method of solving this simple problem, I ask under cat.
Tooltips Link
As you may have already noticed from the listing, I am using the LESS css preprocessor.
We 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 attributes of the data-atribute type, which can store some information about an element or block. It is in the data attributes that we will save the text of the tooltips.
Link
For storage I use the data-tooltip attribute.
We're done with HTML - we can move on to styles. CSS I use the LESS Elements library and recommend it to 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 div#tooltip block to absolute positioning and hide it. Next, we give the block a background color and a text color, make the corners rounded (5px) and set the transparency value to 50%. jQuery Now comes the fun part - jQuery.
$.jQuery(document).ready(function() ( $("").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 elements with the data-tooltip attribute to the selection and when we hover over the desired element with the mouse, we get the tooltip value and store it in a variable. Next, we add the hint text to the #tooltip block, give it the cursor coordinates from the edge of the page + 5 px and finally display the block with the tooltip in the right place. After the mouse leaves the element, we hide the #tooltip block, clear its contents and return it to 0;0;.
That's it!
As a result, we will get something like this: Demo
Thanks to this simple script, all elements on the page that have the data-tooltip attribute will receive a tooltip.
Thank you for your attention!
In this tutorial we will make a tooltip when hovering over an icon using pure CSS. The exact same principle can be applied to a picture. Go to view the demo page.
HTML markup
Let's create a list of five items. Inside each item we will place an i tag with the desired icon, simply copying the code for a specific icon from the Font Awesome website.
Under the icon tag we will write a span tag with the corresponding short hint text.
Comfortable rooms
Credit cards
Shower in the room
Breakfast included
Pets OK
After that, we include the style file - style.css. Change the position of the icons from vertical to horizontal.
To do this, we assign the value - flex to the parent container.
Ul(
display: flex;
}
We color the background under the icons and the color of the icons themselves.
Ulli (
background: #cecfcf;
color: #fff;
}
The icon size is set using the font size.
Ulli (
font-size: 40px;
}
The appearance of the icon row has already been formed.
When you hover the cursor over an icon, the color of the icon and the appearance of the cursor change.
Ul li:hover (
color: #03a9f4;
cursor: pointer;
}
When you hover over the icon, a text tooltip will pop up in a rectangular block; in HTML markup, this is the text in the span tag. Let's place hints above the icons.
Ulli span (
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%) translateY(-20px);
}
Let's set the box sizes to the following fixed sizes.
Ulli span (
width: 120px;
height: 24px;
}
Aligns text to the center vertically and horizontally.
Ulli span (
line-height: 24px;
text-align: center;
}
Background color, text color and text size.
Ulli span (
background: #03a9f4;
color: #fff;
font-size: 14px;
}
Round the corners by 4 pixels and make a smooth transition when hovering.
Ulli span (
border-radius: 4px;
transition: .5s;
}
The tooltip is made invisible and transparent.
Ulli span (
opacity: 0;
visibility: hidden;
}
In order to draw a small arrow under the block, we will use the ::before pseudo-element, which in practice means that the arrow is not actually present in the HTML file (empty content ), but only exists in the CSS file. An arrow pointing towards an icon is nothing more than a 10x10 pixel square shape, rotated 45 degrees and pressed against a span block with a negative value. As a result, the square is transformed into a triangle and lies on a layer lower z-index: -1 than its parent span tag.
Providing additional information about potentially complex user interface elements is a very important part of a web designer's job in developing a user-friendly and accessible website.
One commonly used mechanism for displaying additional information beyond what is visible on the page is tooltips (design elements for displaying hints about certain elements on the screen).
While there are many innovative solutions using CSS and JavaScript (with or without the use of a JavaScript framework such as jQuery), sometimes it's useful to look at how new technologies are shaking up long-standing techniques.
This tutorial will show you how you can make amazing cross-browser tooltips using just CSS.
 |
 |
Wherever you need to explain an abbreviation or acronym, explain the meaning of a word, or provide additional information about something, tooltips are a simple but effective solution.
From the little yellow block of text that appears above an element such as an image and displays the contents of the title attribute (or alt attribute if you're unfortunate enough to be using Internet Explorer) to script-based, sophisticated solutions using tooltips, tooltips are a fantastic tool. which seems to have little popularity in the design community.
Most browsers have default styles for tooltips, although they don't look very pretty.
While rapidly evolving standards with new techniques are beginning to be better and better supported by new browsers, the rise of CSS is also allowing us to make tooltips (which serve as a replacement for boring browser defaults like the one above) at a new level of detail and design.
If you've used jQuery-based solutions before, you'll certainly notice that JavaScript can do a lot of things that CSS can't (such as delaying the tooltip to disappear). But highlighting and styling can be done with CSS, which improves your design and inspires other great designs that go beyond tooltips.
In this tutorial we are going to make tooltips using pure CSS.
This means that they will work in browsers that don't support CSS3 (such as Internet Explorer 8 and older) - they won't look as good in them as they do in newer browsers.
The appearance of effects such as colors, fonts, images and tooltip frames will depend on what is being used on the end user's computer (browser, installed fonts or monitor contrast).
CSS3 ExtensionsUsing simple but effective extensions such as the border-radius and box-shadow properties can give a simple balloon message rectangle a new and pretty look.
What's under our hood?Let's start with the HTML code for our example.
different types of tooltipsIn order to give you enough ideas for your own projects, we will make five different types of tooltips.
Each of them looks very similar to the others in order to standardize the display output. But you can then experiment with them to study them in detail and change the appearance.
This mechanism should work in all browsers, however, if you need, you can change it to your liking.
Basic markupIn the code below, we use the XHTML 1.0 Generic Template with a regular element.
Since we use CSS to build our elements, for learning purposes the CSS is embedded in the document using the .
You can also add jQuery or JavaScript code to enhance the effects and functionality if you like!
HTML Markup Tooltips An example of tooltips made with CSS!Hover your mouse over the text to see: classic hint, critical message 
Critical Post This is just an example of how to make tooltips using CSS!, help 
HelpThis is just an example of how to make tooltips using CSS!, info 
InfoThis is just an example of how to make tooltips using CSS! and warning 
Warning: This is just an example of how to make tooltips using CSS!.
This is just an example of how to make tooltips using CSS!
The code uses an element (nothing special associated with it) and paragraphs (
) for text that contains link elements (for which the class "tooltip" is set).
Why is a tag used for tooltips? ?The reason we use the a tag rather than abbr , dfn or span is that IE6 has poor support for the :hover pseudo-selector for elements other than a .
If you don't intend to support IE6, you can use a different tag.
Each span element in the example is set to class classic (for a regular tooltip) or custom (with critical , help , info or warning to match the color scheme being used).
This use of styling also has a couple of bonuses in the form of an em element (which sets the title of the tooltip) and an image (which is used as an icon in the tooltip; you can use your own images).
CSSWe've written the HTML code for the page and it's time to make the tooltips do their job.
The code below, which is added to a section of the page, sets each link containing the tooltip to a nice little style with a dotted line underline (to differentiate it from a regular link, which has a solid line underline) and sets the cursor with a question mark (also for visual differentiation).
It also removes the underline and sets the color (so the element looks less like a regular link).
The second part of the code simply hides the tooltip until it's needed.
It's very simple!
CSS styles for class.tooltip .tooltip ( border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative; ) .tooltip span ( margin-left: -999em; position: absolute)Tooltip content is removed from view by using a negative margin-left property rather than display: none or visibility: hidden , as some screen readers ignore these properties.
CSS styles for tooltipsWe'll soon make tooltips work the same way across different browsers. Now let's add a few lines of CSS code.
By adding the following piece of code, we will display tooltips on the screen, although they will look banal and will be difficult to visually separate from the rest of the text.
CSS for displaying tooltip .tooltip:hover span ( font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width : 250px; ) .tooltip:hover img ( border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; ) .tooltip:hover em ( font-family: Candara, Tahoma, Geneva, sans- serif; font-size: 1.2em; font-weight: bold; padding: 0.2em 0 0.6em 0; .classic ( padding: 0.8em 1em; ) .custom ( padding: 0.5em 0.8em 2em; ) * html a:hover ( background: transparent; ) Line required * htmlYou may be wondering why the last line in the above code is included? It sets the transparency for the background of the link. While testing tooltips, I discovered a strange effect in IE6 that could not be removed as long as the link background existed!
The above code ensures the functionality of tooltips. They are displayed on the screen, but they are quite difficult to separate from the general text. There are no color schemes that make tooltip text stand out on the page.
Set the color scheme for tooltips/The following code sets a color scheme for each of the five tooltip styles.
After changing the code of the page and updating it in the browser, tooltips will be displayed when you hover the mouse over the link almost the same in all browsers.
CSS code for the color scheme .classic ( background: #FFFFAA; border: 1px solid #FFAD33; ) .critical ( background: #FFCCAA; border: 1px solid #FF3334; ) .help ( background: #9FDAEE; border: 1px solid # 2BB0D7; ) .info ( background: #9FDAEE; border: 1px solid #2BB0D7; ) .warning ( background: #FFFFAA; border: 1px solid #FFAD33; )The CSS code is very simple, but it gives a great look to the tooltips and does its job everywhere. The color scheme can be changed at your discretion.
A few touches of CSS3 for advanced tooltip displayBefore we finish this tutorial, we'll add a few lines of CSS3 code to add visual effects to our tooltips. Let's set rounded corners using the border-radius property and add some dimension using the box-shadow property.
Since none of these properties are supported globally, they will only work in some of the newest browser versions. But where they do work, the tooltips will look sleek and sexy!
Let's add the code below to the selector.tooltip:hover span and refresh the page.
Visual effects for border, shadow, and transparency lift the tooltip above the page text and make the information contrasting and easy to read.
You may notice that not only the official CSS3 properties are used, but also extensions for Mozilla and WebKit.
Additional CSS properties for new browsers border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
This tutorial demonstrates that improving the interface does not require much effort. In addition, it is worth reviewing the experience of using CSS, which can be useful in setting a new level of interactivity for a web application.