Tooltip

Developer
Nicholas M. Smith
Size
3,142 Kb
Views
48,576
  1. Tooltip Previews
  2. Tooltip HTML Codes
  3. Tooltip CSS Codes

How do I make an tooltip?

What is a tooltip? How do you make a tooltip? This script and codes were developed by Nicholas M. Smith on 27 August 2022, Saturday.

Tooltip Previews
IQ Test

Tooltip - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tooltip</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300' rel='stylesheet' type='text/css'>
<div class="page-wrap"> <div class="question-mark"> <div class="tooltip"> <p>I'm a tooltip!</p> </div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"> <g> <line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line> </g> <path d="M15.805 1.282c-8.13 0.109-14.632 6.787-14.523 14.917 0.109 8.125 6.787 14.629 14.917 14.52 8.126-0.109 14.63-6.787 14.52-14.917-0.107-8.126-6.786-14.629-14.914-14.52zM15.762 24.96h-0.082c-1.251-0.037-2.134-0.96-2.099-2.194 0.035-1.211 0.939-2.093 2.15-2.093l0.074 0.002c1.286 0.038 2.16 0.952 2.122 2.221-0.035 1.214-0.926 2.064-2.165 2.064zM21.027 14.509c-0.296 0.418-0.942 0.938-1.758 1.573l-0.899 0.621c-0.493 0.384-0.79 0.744-0.901 1.098-0.090 0.282-0.131 0.354-0.139 0.922l-0.002 0.146h-3.429l0.010-0.291c0.042-1.194 0.072-1.894 0.566-2.475 0.776-0.91 2.488-2.013 2.56-2.059 0.245-0.186 0.451-0.395 0.606-0.619 0.36-0.496 0.518-0.888 0.518-1.27 0-0.533-0.158-1.026-0.47-1.464-0.301-0.424-0.872-0.638-1.698-0.638-0.819 0-1.379 0.261-1.715 0.794-0.347 0.549-0.52 1.123-0.52 1.712v0.147h-3.536l0.006-0.154c0.091-2.166 0.864-3.725 2.298-4.635 0.899-0.581 2.019-0.874 3.325-0.874 1.71 0 3.157 0.416 4.293 1.235 1.152 0.83 1.736 2.075 1.736 3.698 0 0.909-0.286 1.762-0.851 2.536z" fill="#ffffff"></path> </svg> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Tooltip - Script Codes CSS Codes

html, body { background: #3E7B74; height: 100%; width: 100%;
}
.page-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; width: 100%;
}
.question-mark { position: relative; margin: 0 auto; text-align: center; height: 32px; width: 32px;
}
.question-mark:hover .tooltip { bottom: 60px; opacity: 1;
}
.tooltip { background: #FFE7CA; border-radius: 10px; box-sizing: border-box; margin-left: -100px; opacity: 0; padding: 20px; position: absolute; bottom: 50px; left: 50%; -webkit-transition: all 0.15s linear; transition: all 0.15s linear; width: 200px;
}
.tooltip p { font-family: 'Roboto Condensed', sans-serif; font-size: 1.1em;
}
.tooltip::after { border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 16px solid #FFE7CA; content: ""; height: 0; margin-left: -16px; position: absolute; bottom: -16px; left: 50%; width: 0;
}
Tooltip - Script Codes
Tooltip - Script Codes
Home Page Home
Developer Nicholas M. Smith
Username icutpeople
Uploaded August 27, 2022
Rating 4
Size 3,142 Kb
Views 48,576
Do you need developer help for Tooltip?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nicholas M. Smith (icutpeople) Script Codes
Name
Responsive 3D Flip Navigation
Hover Effects
Wordpress 3.8 loader
ReactJS Filter
Floating Labels Form
Aside Nav Animated
Flexbox Test
Scss animated button
Flip Navicon
Pure CSS Minecraft Enderman
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!