CSS Tooltips

CSS Tooltips are a great way to display extra information about something when the user moves the mouse cursor over an element.

Basic Tooltip Example

Let's create basic tooltip that appears when the cursor of the mouse moves over an element.

See this example:

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
  <span class="tooltiptext">This is tooltip text</span>
</div>
</body>
</html>

Test it Now

By using tooltips, you can display the position of the tooltip information in four ways:

Top of the element
Left side of the element
Right side of the element
Bottom of the element

Top Tooltip

The top tooltip specifies that if you move your mouse cursor over the element, the tooltip information will be displayed on the top of the element.

See this example:

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong> Welcome to JavaTpoint</strong>
  <span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

Test it Now

Bottom Tooltip

The bottom tooltip specifies that if you move your mouse cursor over the element, the tooltip information will be displayed on the bottom of the element.

See this example:

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong> Welcome to JavaTpoint</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

Test it Now

Left Tooltip

The left tooltip specifies that if you move your mouse cursor over the element, the tooltip information will be displayed on the left side of the element.

See this example:

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong> Welcome to JavaTpoint</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

Test it Now

Right Tooltip

The right tooltip specifies that if you move your mouse cursor over the element, the tooltip information will be displayed on the right side of the element.

See this example:

 <!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong> Welcome to JavaTpoint</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

Test it Now

Next TopicCSS Tooltip Animation

← prev next →