Pure CSS tooltips

Developer
Mario Nebl
Size
2,292 Kb
Views
68,816
  1. Pure CSS tooltips Previews
  2. Pure CSS tooltips HTML Codes
  3. Pure CSS tooltips CSS Codes

How do I make an pure css tooltips?

What is a pure css tooltips? How do you make a pure css tooltips? This script and codes were developed by Mario Nebl on 07 July 2022, Thursday.

Pure CSS tooltips Previews
IQ Test

Pure CSS tooltips - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS tooltips</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="info info--top-left"> ℹ <div class="tooltip"> <aside class="tooltip__content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. </aside> </div>
</div>
<div class="info info--top-right"> ℹ <div class="tooltip"> <aside class="tooltip__content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. </aside> </div>
</div>
<div class="info info--bottom-right"> ℹ <div class="tooltip"> <aside class="tooltip__content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. </aside> </div>
</div>
<div class="info info--bottom-left"> ℹ <div class="tooltip"> <aside class="tooltip__content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. </aside> </div>
</div>
</body>
</html>

Pure CSS tooltips - Script Codes CSS Codes

html, body { margin: 0; padding: 0; background: ; font-family: sans-serif; background: #5ec792; color: #fff;
}
.info { position: relative; display: inline-block; margin: 20px; width: 20px; height: 20px; text-align: center; background: rgba(0, 0, 0, .5); border-radius: 50%; cursor: help;
}
.info--top-left { position: absolute; top: 20px; left: 20px;
}
.info--top-right { position: absolute; top: 20px; right: 20px;
}
.info--bottom-right { position: absolute; bottom: 20px; right: 20px;
}
.info--bottom-left { position: absolute; bottom: 20px; left: 20px;
}
.tooltip { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100vw; height: 100vh;
}
.tooltip__content { text-align: left; width: 100%; max-width: 250px; max-height: 100%; overflow: auto;
}
Pure CSS tooltips - Script Codes
Pure CSS tooltips - Script Codes
Home Page Home
Developer Mario Nebl
Username marionebl
Uploaded July 07, 2022
Rating 3
Size 2,292 Kb
Views 68,816
Do you need developer help for Pure CSS 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!

Mario Nebl (marionebl) Script Codes
Name
Basic jogwheel example
Animation in relation to user input, the sane way
A Pen by Mario Nebl
Pure CSS tabs
Blog Concept - Single Post
Floating Labels
JQuery for the poor
Pure CSS toggles
Pure CSS lightbox technique
Mobile toolbar study
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!