Tooltip with pseudo-element

Developer
Twikito
Size
2,763 Kb
Views
26,312
  1. Tooltip with pseudo-element Previews
  2. Tooltip with pseudo-element HTML Codes
  3. Tooltip with pseudo-element CSS Codes
  4. Tooltip with pseudo-element JS Codes

How do I make an tooltip with pseudo-element?

Classic tooltip made with CSS pseudo-element.. What is a tooltip with pseudo-element? How do you make a tooltip with pseudo-element? This script and codes were developed by Twikito on 11 September 2022, Sunday.

Tooltip with pseudo-element Previews
IQ Test

Tooltip with pseudo-element - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tooltip with pseudo-element</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:400'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus dolore impedit cum aliquid <a href="#" title="Wooooosh!">cumque optio id</a>, voluptates qui. Eum dolores labore corporis temporibus laboriosam ea possimus quam eius ratione voluptate.</p>	<p>Saepe consequuntur atque ullam velit accusantium dolorem, tempore cumque sed quisquam adipisci. Voluptatem <a href="#" title="Kapaw!">sit facere itaque</a> nobis voluptatum veniam, molestias labore officia voluptatibus eligendi consequuntur dolorum atque voluptate magni accusamus.</p>
</article> <script src="js/index.js"></script>
</body>
</html>

Tooltip with pseudo-element - Script Codes CSS Codes

a { position: relative;
}
a::before { content: attr(title); position: absolute; bottom: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: rgba(10, 38, 57, 0.9); padding: .25em .5em; pointer-events: none; opacity: 0; -webkit-transition: all .2s ease-out; transition: all .2s ease-out;
}
a:hover::before, a:focus::before { -webkit-transform: translateX(-50%) translateY(-10%); transform: translateX(-50%) translateY(-10%); opacity: 1;
}
/* BLAH BLAH */
html, body { height: 100%;
}
body { background: #3498db; color: white; font: 1em/1.4 "lato"; font-weight: 300; display: -webkit-box; display: -ms-flexbox; display: flex;
}
article { width: 80%; margin: auto; font-size: 1.3em;
}
@media (min-width: 60em) { article { width: 75%; }
}
a { color: inherit;
}

Tooltip with pseudo-element - Script Codes JS Codes

/* NO JS!
*/
Tooltip with pseudo-element - Script Codes
Tooltip with pseudo-element - Script Codes
Home Page Home
Developer Twikito
Username Twikito
Uploaded September 11, 2022
Rating 3
Size 2,763 Kb
Views 26,312
Do you need developer help for Tooltip with pseudo-element?

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!

Twikito (Twikito) Script Codes
Name
Picture hover effect with pseudo-elements
Easy CSS3 checkboxes and radio buttons
Beautiful Textual Map of France with CSS
CSS-only shadow-scrolling effect
Easy and Bulletproof ScrollTo Script
LavaLamp effect with CSS
Summary with pseudo-element
Pure CSS Slider
Realistics radio buttons with only css
Menu item 3D effect on hover with only css
Create amazing marketing copy 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!