Modern hints for the site when hovering

Greetings to you dear user on his website. When that, I already talked about how to add tooltips on CSS, But today I wandered around the internet and came across cool pop-up hints when hovering. A bit of testing them, I thought that maybe someone like that, hints on a clean css for your site just like that.

These tips can be used almost to any button on the site, or to any word combination, picture, and in general to anything, but for example, the tooltips on the site are used for social buttons, when hovering, a cool text prompt appears.

It often happens that there are a lot of different blocks, texts and other useful content on your site that can confuse the user, that's where the help pop-up help comes in, they can provide some information for some site or button on the site.

In this article I want to share with you wonderful tips on hovering, and just for yourself to make a note for the future, and suddenly come in handy :). In the article, I will not just give you the sources, but also describe a little with what to eat, how to set up hints on the site, how to connect them, in the demonstration you can look at their different effects, etc. ...

Here is a roughly similar view will have a pop-up bookmark on your site:

Modern hints for the site when hovering

In general, proceed, and first we need to create HTML markup for our animated site tips, create a li list that will look something like this:

Well, in the first point of the complex there is nothing, I think everything is clear, now let's get down to a more complex task, this is adding css styles, in which transitions and pseudo elements such as: before and: after will be applied. For animated prompts, we will use pure css code without using js scripts. Below we add an example of styles css in which the elements of the list will be moved to the left side, and the links will take the following form:

After we need to specify the position for each individual background image:

Next point we need to add the effect of the appearance of a hint that will appear above the selected item from the top, set the property of the bottom position to 100px.

Due to the fact that the tooltip should appear exactly when the mouse hovers over the link element (and the span value in this case also acts as a link), in which case the tooltip will be displayed when the mouse pointer is passed above the link. (the span element is present, but with a transparency value of zero, that is, it becomes invisible).

In order to create a pointer, we need to apply the property: before and: after. Styles in these values will be the same, plus we will create a triangle using transparent right and left frames. The pseudo-element: before in this case is a shadow for the pseudo-element: after, so we need to set its dark value using low opacity.

Well, the last point we will have, the pseudo-element: after, which will move by 1 pixel and becomes white with a circle of tips.

That's basically all that's required to make hints on your site, there's nothing complicated here, but the tips on the site look really nice.

You can see the live example of the tooltips on our website: