Create a Tooltip using HTML & CSS

Faisal
Posts: 2
Joined: Tue Mar 15, 2016 9:08 am

Create a Tooltip using HTML & CSS

Postby Faisal » Tue Mar 15, 2016 9:45 am

We’ll be able to use the CSS tooltip on most of the inline elements, such as links, strong tags, spans, italicized text, etc. You would need to apply a few classes to your element, and add a data- attribute with the tooltip text. Let’s get started.

Setting up the document

First off, we need to create an HTML document and set up the initial markup.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tooltips Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Work+Sans:300,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
// content
    </div>
</body>
</html>


I created a div with a class of container where we’re going to put our main tooltip examples. Here are the styles for the body and .container class:

Code: Select all

body {
    font-family: arial;
    font-size: 1.5em;
    line-height: 1.4em;
    font-weight: 700;
    background-color: #28ABE3;
    color: #fff;
}
.container {
    width: 800px;
    margin: 100px auto;
    background: radial-gradient(circle farthest-corner at 400px 250px , #64BBE0 0%, #28ABE3, #28ABE3 95%);
}

I’ll be using tooltips with anchor tags, but you can assign the classes to other inline elements such as strong tags or spans. Here’s the content of our container div:

[code]<ul class="tooltip-wrapper">
            <li><a href="#" class="tooltip tooltip-top" data-tooltip="Hey, I'm at the top!">Tooltip top</a></li>
            <li><a href="#" class="tooltip tooltip-bottom" data-tooltip="And I'm at the bottom">Tooltip bottom</a></li>
            <li><a href="#" class="tooltip tooltip-left" data-tooltip="I'm left all alone">Tooltip left</a></li>
            <li><a href="#" class="tooltip tooltip-right" data-tooltip="You're wrong and I'm right">Tooltip right</a></li>
</ul>[/code]


The unordered list contains four list items with anchor tags. I styled the list items so that they don’t contain bullet points, and are displayed as an inline-block, which will help us to add some margin between them.

[code].tooltip-wrapper {
    padding: 160px 0;
    text-align: center;
}
.tooltip-wrapper li {
    list-style: none;
    display: inline-block;
    margin: 0 10px;
}
.tooltip-wrapper li a {
    color: #fff;
    text-decoration: none;
}[/code]

Let’s take a closer look at the anchor tag:

[code]<a href="#" class="tooltip tooltip-left" data-tooltip="I'm left all alone">Tooltip left</a>


I assigned two classes to the links. The first .tooltip class will be responsible for the main body of a tooltip, while the second class will manage its placement.

You will also notice a custom data- attribute which holds the content of our tooltip. It will come in handy later, when we’ll be building the tooltip class.

Check this preview. You can download the codes from Codepen as well.

http://codepen.io/russel365/pen/ZWBKVa

Return to “Web UI Design”

Who is online

Users browsing this forum: No registered users and 1 guest