Accessible Tooltip

Developer
Andy Hoffman
Size
2,912 Kb
Views
30,360
  1. Accessible Tooltip Previews
  2. Accessible Tooltip HTML Codes
  3. Accessible Tooltip CSS Codes

How do I make an accessible tooltip?

What is a accessible tooltip? How do you make a accessible tooltip? This script and codes were developed by Andy Hoffman on 24 August 2022, Wednesday.

Accessible Tooltip Previews
IQ Test

Accessible Tooltip - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accessible Tooltip</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="tooltip-wrapper" aria-describedby="my-tooltip" tabindex="0">Shhh, I have a tooltip<span id="my-tooltip" role="tooltip">I'm the tooltip</span></div>
</body>
</html>

Accessible Tooltip - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Arimo);
body { background: #9966cc;
}
.tooltip-wrapper { text-transform: uppercase; background: #ececec; color: #555; cursor: help; font-family: Arimo; position: absolute; text-align: center; font-size: 1.2em; padding: 15px 20px; width: 200px; left: 50%; top: 50%; -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%); transform: translateZ(0) translateX(-50%) translateY(-50%); -webkit-font-smoothing: antialiased;
}
.tooltip-wrapper [role=tooltip] { font-size: 0.8em; bottom: 100%; left: 50%; margin-bottom: 15px; opacity: 0; padding: 1em 0; width: 100%; -webkit-transform: translateY(10px) translateX(-50%); transform: translateY(10px) translateX(-50%); -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); pointer-events: none; position: absolute; background: #262626; color: white; display: block;
}
.tooltip-wrapper [role=tooltip]:before { bottom: -1.2em; height: 1.2em; left: 0; width: 100%; position: absolute; content: " "; display: block;
}
.tooltip-wrapper [role=tooltip]:after { border-left: solid transparent 0.8em; border-right: solid transparent 0.8em; border-top: solid #262626 0.8em; bottom: -0.8em; content: " "; height: 0; left: 50%; margin-left: -13px; width: 0; position: absolute;
}
.tooltip-wrapper:hover [role=tooltip], .tooltip-wrapper:focus [role=tooltip] { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px) translateX(-50%); transform: translateY(0px) translateX(-50%);
}
Accessible Tooltip - Script Codes
Accessible Tooltip - Script Codes
Home Page Home
Developer Andy Hoffman
Username antibland
Uploaded August 24, 2022
Rating 3
Size 2,912 Kb
Views 30,360
Do you need developer help for Accessible 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!

Andy Hoffman (antibland) Script Codes
Name
ToDo With Strikethrough
Trusted Clicks
Skewed Frame
Battle Donald J. Trump
Animated Stacked Pages
Working with jQuery Marquee plugin
A Pen by Andy Hoffman
Animate fill color via currentColor
Flexbox 3-Column Layout
Full page image fade in
Create amazing blog posts 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!