Customize Your Anchor Link Tooltips Using This Tutorial

Advertisement

Tooltips, also referred to as ScreenTips, are a great way to show more information or messages that appears when a cursor is positioned over a hyperlink, icon, images or any other element. There are many ways to create anchor link tooltips.

The idea of tooltips came from older Microsoft applications like Microsoft Word. It had a toolbar where moving the mouse over the buttons displayed the tooltips.

In today’s tutorial, you will learn how to customize your tooltips using pure HTML and CSS3 using a span element. Let’s get started.

Resources you need to complete this tutorial

  • Basic CSS3 knowedge
  • Time and Patience

anchor link tooltips

Creating Top, Left, Right and Bottom Position Tooltips

The HTML

Begin by creating simple markups for the hyperlinks. You need a span element to utilize the content of the tooltip. Also, put a class for each hyperlinks and style them later.

a class="top_tooltip" href=""TOP POSITIONspanThis is a top position tooltip!/span/a
a class="left_tooltip" href=""LEFT POSITIONspanThis is a left position tooltip!/span/a
a class="right_tooltip" href=""RIGHT POSITIONspanThis is a right position tooltip!/span/a
a class="bottom_tooltip" href=""BOTTOM POSITIONspanThis is a bottom position tooltip!/span/a

The CSS

Now that the markup is ready, apply some style to the anchor tag classes.

a.top_tooltip,a.left_tooltip,a.right_tooltip,a.bottom_tooltip {
	display: inline;
	position: relative;
}

After displaying the tooltips classes as inline link and giving it a position relative, add some styles now for the span elements by giving it a rounded box for the tooltip body. Remember to manipulate the position using margins and position properties to push them to the right positions.

/* TOP TOOLTIP
-------------------------------------------------*/
a.top_tooltip span {
    width: 140px;
    height: auto;
    color: 
    background: 
    position: absolute;
    font-size: 13px;
    text-align: center;
    padding: 10px;
    line-height: 20px;
    visibility: hidden;
    border-radius: 10px;
}

a.top_tooltip span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid 
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

a:hover.top_tooltip span {
    visibility: visible;
    opacity: 0.8;
    bottom: 30px;
    left: 50%;
    margin-left: -76px;
    z-index: 999;
}

/* LEFT TOOLTIP
-------------------------------------------------*/
a.left_tooltip span {
    width: 140px;
    height: auto;
    color: 
    background: 
    position: absolute;
    font-size: 13px;
    text-align: center;
    padding: 10px;
    line-height: 20px;
    visibility: hidden;
    border-radius: 10px;
}

a.left_tooltip span:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid 
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

a:hover.left_tooltip span {
    visibility: visible;
    opacity: 0.8;
    right: 100%;
    top: 50%;
    margin-top: -30px;
    margin-right: 10px;
    z-index: 999;
}

/* RIGHT TOOLTIP
-------------------------------------------------*/
a.right_tooltip span {
    width: 140px;
    height: auto;
    color: 
    background: 
    position: absolute;
    font-size: 13px;
    text-align: center;
    padding: 10px;
    line-height: 20px;
    visibility: hidden;
    border-radius: 10px;
}

a.right_tooltip span:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -8px;
    width: 0;
    height: 0;
    border-right: 8px solid 
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

a:hover.right_tooltip span {
    visibility: visible;
    opacity: 0.8;
    left: 100%;
    top: 50%;
    margin-top: -30px;
    margin-left: 10px;
    z-index: 999;
}

/* BOTTOM TOOLTIP
-------------------------------------------------*/
a.bottom_tooltip span {
    width: 140px;
    height: auto;
    color: 
    background: 
    position: absolute;
    font-size: 13px;
    text-align: center;
    padding: 10px;
    line-height: 20px;
    visibility: hidden;
    border-radius: 10px;
}

a.bottom_tooltip span:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-bottom: 8px solid 
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

a:hover.bottom_tooltip span {
    visibility: visible;
    opacity: 0.8;
    top: 30px;
    left: 50%;
    margin-left: -76px;
    z-index: 999;
}

Using the :hover selector, make the tooltips visible. Position them respectively on mouse-over state. The :after selector will insert the contents after the selected element.

Changing the Color of Tooltips

Now that you now know how to create a tooltips, you can change the color of each tooltips. Changing the colors is not really that hard. First, you need to go to the span element’s style and change the background to the preferred color.

a.bottom_tooltip_red span {
    background: 
}

Next, you also need to change the border color of the position of the tooltip under :after selector styles.

In the example below,the bottom position tooltip will be changed. First, you need to change the border-bottom color to your preferred color, similar to the color used above.

a.bottom_tooltip_red span:after {
    border-bottom: 8px solid 
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

Adding Animation Effects to Tooltips

With the new CSS3 features, you can add some cool effects to the tooltips. For this part of the tutorial, you will learn how you can add some plain fading effects and a sliding effect.

To create plain fading effects, you need to manipulate the opacity of the span element on its normal state and mouse-over state using the transition property. Add the code below to the tooltips.

a.left_tooltip_fading span {
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    opacity: 0;
}

a:hover.left_tooltip_fading span {
    opacity: 1;
}

Notice that ease-in-out as the transition-timing-function was used to create a smooth fading in and out effect.

Now to create a bouncing effect, you need to add translated3d value and a smooth transition on its mouse-over state. This will add a nice sliding effect to the toolkit appearance. Add the following code to the tooltips span element.

a:hover.bottom_tooltip_sliding span {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    transition: .3s ease;
}

Displaying Images to the tooltip

There is really nothing special in adding images on tooltips. You just need to put the image link and give it the preferred height and width. If you prefer to put a text on it, then, you can customize the style of the class  for that specific tooltip. As an example, see the markup below.

a class="images_tooltip" href=""IMAGESspanimg height="100"  src="img/cat.jpg" width="70"/span/a

Final Words

All done! You just made an awesome custom tooltips using HTML and CSS3. Although these tooltips were made manually, there are also other ways to do it like by using a CSS library like Hint.css or using a jQuery plugin like tooltipser.js.

Please feel free to play around with the codes above. If this can be improved in any way, I want to hear from you. Please share the ideas on the comment section below.

Hope you enjoyed this tutorial and see you again on the next tutorial!

Advertisement
Customize Your Anchor Link Tooltips Using This Tutorial | manda | 4.5
%d bloggers like this: