Tooltip

Developer
Mariam Massadeh
Size
2,678 Kb
Views
26,312
  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 Mariam Massadeh on 22 September 2022, Thursday.

Tooltip Previews
IQ Test

Tooltip - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tooltip</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url("https://fonts.googleapis.com/css?family=Raleway:100,200,300,regular,500,600,700,800,900");
body
{ background-color:#f8f8f8; background-image:url("http://www.4shared.com/download/lGOXtMUM/noise.png"); background-repeat:repeat; font-family: Raleway;
}
.container
{ background-color:#D7286F; width:150px; height:100px; border-radius:10px; margin-top:10%; margin-left:25%; padding:1px 5px 5px 5px; position:relative;
}
.inner
{ border-top:2px solid #FBC9DE; margin:0 auto; height:80px; border-radius:10px; padding:5px;
}
p
{ margin:0 auto; text-align:center; color:#D7286F; border:2px inset #ccc; height:80px; background-color:#fff; z-index:1; line-height:80px;
}
.container:after {
content: '';
position: absolute;
width: 0px;
height: 0px;
border: 45px solid transparent;
border-top-color: #D7286F;
border-radius: 50% 0px 0px 0p;
top: 58%;
left: 20%; transform: rotate(135deg);
-ms-transform: rotate(135deg); /* IE 9 */
-webkit-transform: rotate(135deg); /* Safari and Chrome */ -moz-box-shadow: 0px -25px 0px 0px rgba(218,224,228,0.5); -webkit-box-shadow: 0px -25px 0px 0px rgba(218,224,228,0.5); box-shadow: 0px -25px 0px 0px rgba(218,224,228,0.5);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="inner"> <p> I'm a tool tip </p> </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

@import url("https://fonts.googleapis.com/css?family=Raleway:100,200,300,regular,500,600,700,800,900");
body
{ background-color:#f8f8f8; background-image:url("http://www.4shared.com/download/lGOXtMUM/noise.png"); background-repeat:repeat; font-family: Raleway;
}
.container
{ background-color:#D7286F; width:150px; height:100px; border-radius:10px; margin-top:10%; margin-left:25%; padding:1px 5px 5px 5px; position:relative;
}
.inner
{ border-top:2px solid #FBC9DE; margin:0 auto; height:80px; border-radius:10px; padding:5px;
}
p
{ margin:0 auto; text-align:center; color:#D7286F; border:2px inset #ccc; height:80px; background-color:#fff; z-index:1; line-height:80px;
}
.container:after {
content: '';
position: absolute;
width: 0px;
height: 0px;
border: 45px solid transparent;
border-top-color: #D7286F;
border-radius: 50% 0px 0px 0p;
top: 58%;
left: 20%; transform: rotate(135deg);
-ms-transform: rotate(135deg); /* IE 9 */
-webkit-transform: rotate(135deg); /* Safari and Chrome */ -moz-box-shadow: 0px -25px 0px 0px rgba(218,224,228,0.5); -webkit-box-shadow: 0px -25px 0px 0px rgba(218,224,228,0.5); box-shadow: 0px -25px 0px 0px rgba(218,224,228,0.5);
}
Tooltip - Script Codes
Tooltip - Script Codes
Home Page Home
Developer Mariam Massadeh
Username MariamMassadeh
Uploaded September 22, 2022
Rating 3
Size 2,678 Kb
Views 26,312
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!

Mariam Massadeh (MariamMassadeh) Script Codes
Name
Coming Soon
Simple blog container, tool tip, simple animation on hover
Responsive Menu with sub menu- CSS3 animation, simple jquery
Menu with a featured tooltip that has an animation from Jumping Animation pen
Simple Chat Conversation
Animated Progress Bar
Emploee Tree
CSS3 Animation
Html5-canvas-snow-effect
Css3-image-slider-with-stylized-thumbnails
Create amazing art & images 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!