How to use SVG In CSS
In this approach, we are using SVG to create a tooltip with a right arrow. The tooltip is displayed below the text “Hover over me” and shows the content “w3wiki” with a right-pointing arrow when hovered.
Syntax:
<svg width="width" height="height">
<!-- shape -->
</svg>
Example: The below example uses SVG to make a Tooltip with a right Arrow.
<!DOCTYPE html>
<html>
<head>
<title>Using SVG</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Geeks For Geeks</h1>
<h3>Using SVG</h3>
<div class="tooltip">
Hover over me
<div class="tooltiptext">
w3wiki
<svg height="15" width="15">
<polygon
points="0,0 10,7.5 0,15"
fill="#4caf50" />
</svg>
</div>
</div>
</body>
</html>
body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
margin: 0;
}
h1 {
color: green;
text-align: center;
}
h3 {
text-align: center;
}
.tooltip {
position: relative;
display: inline-block;
margin-top: 20px;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 180px;
background-color: #4caf50;
color: #fff;
text-align: center;
border-radius: 8px;
padding: 10px;
position: absolute;
z-index: 1;
left: 50%;
transform: translate(-50%, -70%);
opacity: 0;
transition: opacity 0.3s, visibility 0s linear 0.3s;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
left: calc(-130%);
}
.tooltip .tooltiptext svg {
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
transition: opacity 0.3s, visibility 0s linear 0s;
}
Output:
How to Make a Tooltip With an Right Arrow ?
Tooltips are used to display the additional information along with the links on the web pages. It adds enhancement and increases the overall user experience while using the application.
Below are the approaches to make a tooltip with an right arrow:
Table of Content
- Using CSS Pseudo-elements
- Using SVG
Contact Us