CSS only tooltips

Developer
Samuel Janes
Size
3,273 Kb
Views
24,288
  1. CSS only tooltips Previews
  2. CSS only tooltips HTML Codes
  3. CSS only tooltips CSS Codes

How do I make an css only tooltips?

What is a css only tooltips? How do you make a css only tooltips? This script and codes were developed by Samuel Janes on 14 September 2022, Wednesday.

CSS only tooltips Previews
IQ Test

CSS only tooltips - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS only tooltips</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet"> <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> <div class='center'>	<div class='field'>	<button class='has-tooltip'>This is a button</button>	<span class='tooltip blue'><p>This is a blue tooltip</p></span>	</div>	<div class='field'>	<button class='has-tooltip'>This is a button</button>	<span class='tooltip red'>	<p>This is a red tooltip</p>	<img src="http://www.placehold.it/1920X1080" />	</span>	</div>	<div class='field'>	<button class='has-tooltip'>This is a button</button>	<span class='tooltip green'>	<p>This is a green tooltip</p>	</span>	</div>	<div class='field'>	<button class='has-tooltip'>This is a button</button>	<span class='tooltip purple'>	<p>This is a purple tooltip</p>	</span>	</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</body>
</html>

CSS only tooltips - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { min-height: 100vh; display: flex; justify-content: center; align-items: center;
}
body, button, input, textarea, select { font-family: "Raleway", sans-serif;
}
.center { width: 100%; max-width: 1200px; text-align: center; margin: auto; display: flex; justify-content: center; flex-wrap: wrap; padding: 20px;
}
button, .btn, input[type='submit'] { padding: 20px 60px; border: none; outline: none; background: #47b8e0; transition: 0.15s ease-in-out; color: white; text-decoration: none; border-radius: 5px; display: inline-block;
}
button:hover, button:focus, .btn:hover, .btn:focus, input[type='submit']:hover, input[type='submit']:focus { background: #23a3d1;
}
.has-tooltip:hover + .tooltip,
.has-tooltip:focus + .tooltip,
.has-tooltip.hover + .tooltip { opacity: 1; transform: translate(-50%, -100%) scale(1) rotate(0deg); pointer-events: inherit;
}
.tooltip { display: block; position: absolute; top: 0px; left: 50%; transform: translate(-50%, -50%) scale(0.75) rotate(5deg); transform-origin: bottom center; padding: 10px 30px; border-radius: 5px; background: rgba(0, 0, 0, 0.75); text-align: center; color: white; transition: 0.15s ease-in-out; opacity: 0; width: 100%; max-width: 100vw; pointer-events: none; z-index: 5;
}
.tooltip.blue { background: rgba(71, 184, 224, 0.75);
}
.tooltip.blue:after { border-top: 5px solid rgba(71, 184, 224, 0.75);
}
.tooltip.red { background: rgba(231, 29, 54, 0.75);
}
.tooltip.red:after { border-top: 5px solid rgba(231, 29, 54, 0.75);
}
.tooltip.green { background: rgba(46, 196, 182, 0.75);
}
.tooltip.green:after { border-top: 5px solid rgba(46, 196, 182, 0.75);
}
.tooltip.purple { background: rgba(165, 147, 224, 0.75);
}
.tooltip.purple:after { border-top: 5px solid rgba(165, 147, 224, 0.75);
}
.tooltip:hover { opacity: 1; transform: translate(-50%, -100%) scale(1) rotate(0deg); pointer-events: inherit;
}
.tooltip img { max-width: 100%;
}
.tooltip:after { content: ""; display: block; margin: 0 auto; widtH: 0; height: 0; border: 5px solid transparent; border-top: 5px solid rgba(0, 0, 0, 0.75); position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%);
}
.field { position: relative; padding: 20px;
}
CSS only tooltips - Script Codes
CSS only tooltips - Script Codes
Home Page Home
Developer Samuel Janes
Username SamuelJanes
Uploaded September 14, 2022
Rating 4.5
Size 3,273 Kb
Views 24,288
Do you need developer help for CSS only tooltips?

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!

Samuel Janes (SamuelJanes) Script Codes
Name
Clipped Navigation
Multi-Step Sign Up Form
Material Ripple Effect on Button
New Portfolio Idea
Bottom Right Menu
Responsive Carousel Slider with Jquery
Navigation layout
Navigation triangle
Modest Mouse Night on the Sun in CSS
Hamburger Menus
Create amazing sales emails 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!