How to make tooltip in the css

5/52 ratings

Good day dear user, today I would like to talk about how to create a tooltip text using CSS, well, and create a few examples.

And so what the "tooltips" - is the text or image that appears when you hover the mouse pointer over the link or some other element of the page, if the title attribute is its description.

Tooltips can be used for reference, and for any images.

In the usual form without issuing a clue about this kind of as in the photo below:

And it shows the standard system by using the title attribute, without registration of the code of the tooltip is as follows:

<a title="Tooltip" href="http://site.ru/">Link</a>

1	<a title="Tooltip" href="http://site.ru/">Link</a>

But as we said initially, we will make these tooltips prettier, and will use the css code, today we will consider three options for tooltips.

Since it is not possible in a simple CSS design title, so we will add different attributes to write for them clearance and accordingly add them to the code of our links or images for which we do pretty tooltip.

Option tooltip first, and in it we will add a hint on the photo at the bottom when the mouse pointer.

To perform this operation, we will use two attributes: image, and in order to help our working after and data-text to display the tooltip text.

Example of CSS styles for this version of the tooltip:

.image {
    display: inline-block;
    position: relative;
   }
   .image:hover::after {
    content: attr(data-text); /* Print the tooltip text*/
    position: absolute;
    left: 0; right: 0; bottom: 0px; /* Position tooltip */
    z-index: 1; /* Displays hints on top of other elements */
    background: rgba(0,255,102,0.6); /* The color (RGB) and the degree of its transparency */
    color: #fff; /* Text color */
    text-align: center; /* Align text in the center */
    font-family: Arial, sans-serif; /* Typefaces */
    font-size: 11px; /* The size of the help text */
    padding: 5px 10px; /* Fields */
    border: 1px solid #333; /* Within the parameters */
   }

.image {

display: inline-block;

position: relative;

}

.image:hover::after {

content: attr(data-text); /* Print the tooltip text*/

position: absolute;

left: 0; right: 0; bottom: 0px; /* Position tooltip */

z-index: 1; /* Displays hints on top of other elements */

background: rgba(0,255,102,0.6); /* The color (RGB) and the degree of its transparency */

color: #fff; /* Text color */

text-align: center; /* Align text in the center */

font-family: Arial, sans-serif; /* Typefaces */

font-size: 11px; /* The size of the help text */

padding: 5px 10px; /* Fields */

border: 1px solid #333; /* Within the parameters */

}

And the HTML code looks like this:

<div class="image" data-text="Text tips"><img src="path to image" alt="" /></div>

1	<div class="image" data-text="Text tips"><img src="path to image" alt="" /></div>

But about such a result, we get:

But this option links the tooltip will not work of course, mean we will use slightly different methods of withdrawal of our tips. In the first method, we derive a tooltip is over our link.

CSS code sample below:

.podskazka{
    display: inline;
    position: relative;
}
.podskazka:hover:after{
    background: #333;
    background: rgba(204,102,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: auto;
}
.podskazka:hover:before{ /* Adding the arrow at the bottom of the tooltip unit */
    border: solid;
    border-color: #cc6600 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

.podskazka{

display: inline;

position: relative;

}

.podskazka:hover:after{

background: #333;

background: rgba(204,102,0,.8);

border-radius: 5px;

bottom: 26px;

color: #fff;

content: attr(title);

left: 20%;

padding: 5px 15px;

position: absolute;

z-index: 98;

width: auto;

}

.podskazka:hover:before{ /* Adding the arrow at the bottom of the tooltip unit */

border: solid;

border-color: #cc6600 transparent;

border-width: 6px 6px 0 6px;

bottom: 20px;

content: "";

left: 50%;

position: absolute;

z-index: 99;

}

And for our links with prompt do the following code:

<a class="podskazka" title="The text of our tips." href="https://web-ukraine.com/">Link</a>

1	<a class="podskazka" title="The text of our tips." href="https://web-ukraine.com/">Link</a>

And the result we get is this:

Move your mouse over here

And the last third option - Per our tooltip will be a reference, in principle, it is similar to the previous but slightly different design and output a reference.

Example CSS code:

.tooltip { 
  position: relative;     /* Making the parent element for tooltips */
  cursor: help;
}
.tooltip span {
  position: absolute;     /* We derive from flow element */
  margin-left: -30000px;  /* And hide the far edge of the screen */
  background-color: rgba(0,0,153,.8); /* Background pop-up unit*/
  color: #fafafa;             /* Text color */
  padding:10px;                 /* Padding */               
  -webkit-border-radius: 5px; /* Round off corners */
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
.tooltip:hover span {     /* Hovering */
  margin-left: 0;         /* Return from the far edge of the screen block into place */
  width: 250px;           /* Specifies the width */
  z-index: 1000;          /* Put to the top */
                          /* Positioning relative to the parent unit */
  top:30px;               /* Top inset */  
  left:20px;              /* Left Indent */          
}
.tooltip span:after{
  content: '';            /* Add content */ 
  width:0;                /* We hide it, turning it into a 0 */
  height:0;
  border-bottom: 10px solid #000099;  /* Lower Border Sets the color and height of the triangle */
  border-right: 30px solid transparent; /* Change - the width of the right triangle */
  position: absolute;     /* Positioning relative to the parent unit */
  top:-10px;
  left:10px;
}

.tooltip {

position: relative; /* Making the parent element for tooltips */

cursor: help;

}

.tooltip span {

position: absolute; /* We derive from flow element */

margin-left: -30000px; /* And hide the far edge of the screen */

background-color: rgba(0,0,153,.8); /* Background pop-up unit*/

color: #fafafa; /* Text color */

padding:10px; /* Padding */

-webkit-border-radius: 5px; /* Round off corners */

-moz-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

}

.tooltip:hover span { /* Hovering */

margin-left: 0; /* Return from the far edge of the screen block into place */

width: 250px; /* Specifies the width */

z-index: 1000; /* Put to the top */

/* Positioning relative to the parent unit */

top:30px; /* Top inset */

left:20px; /* Left Indent */

}

.tooltip span:after{

content: ''; /* Add content */

width:0; /* We hide it, turning it into a 0 */

height:0;

border-bottom: 10px solid #000099; /* Lower Border Sets the color and height of the triangle */

border-right: 30px solid transparent; /* Change - the width of the right triangle */

position: absolute; /* Positioning relative to the parent unit */

top:-10px;

left:10px;

}

Well and, accordingly, the html-code for the link:

<span class="tooltip">Link<span class="classic">The text of the tooltip</span></span>

1	<span class="tooltip">Link<span class="classic">The text of the tooltip</span></span>

And you will have to get a result as in the example below:

Move your mouse over hereThe text of the tooltip

So we looked at three options for tooltips, like nothing complicated but our tooltips already have a nice view of what was originally their course in the network much more can be found and it is only a small part of the examples on this try and comment on.