WeCode
Academy
Tutorials
Web Development
Bootstrap
CSS
HTML
JavaScript
jQuery
Node.js
PHP
React
TypeScript
Programming
C
C#
C++
Go
Java
Python
Rust
Data and Databases
NumPy
Pandas
SQL
Tools
Bash
Git
Projects
Project: A Tiny Shell in C
Project: Bank Account System
Project: Library Management System
Project: Portfolio Page
Project: Quiz App in React
Project: Sales Data Analysis
Project: Server Log Analyser
Project: To-Do REST API
Project: URL Shortener
Project: Word Counter in Four Languages
All tutorials ❯
Paths
References
Practice
Try it editor
Quizzes
How To recipes
Tools
Glossary
My Learning
🌙
Dark mode
Home
›
How To
›
CSS
Build a pure CSS tooltip
Show a ::after pseudo-element from a data attribute on hover.
Example
html
<style> .tip { position: relative; display: inline-block; border-bottom: 1px dotted; cursor: help; } .tip::after { content: attr(data-tip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background: #282a35; color: white; padding: 4px 10px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; } .tip:hover::after { opacity: 1; } </style> <p style="margin-top:40px">Hover the <span class="tip" data-tip="A pure CSS tooltip">dotted word</span>.</p>
Run ❯
Reset
Open in editor »
More CSS recipes
Center a div horizontally and vertically
Make a sticky header
Create a responsive grid of cards
Style a button with a hover effect
Make a loading spinner
WeCodeAcademyWeCodeAcademy