Rounded Cube Tooltip
Tooltips · @MohamedAboSeada
- No JS
- Reduced-motion ready
Action Green Tooltip
A pure-CSS tooltip with glow and fade effects. Created by andrew-demchenk0 on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 1.1 KB gzip
Created by @andrew-demchenk0 on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Customisable properties (--accent, --color-2, --color-3) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Action Green Tooltip" by andrew-demchenk0 on Uiverse.io · MIT License · https://uiverse.io/andrew-demchenk0/bad-sloth-57 -->
<div class="container">
<input type="checkbox" id="showCheckbox" class="toggle-checkbox" />
<label for="showCheckbox" class="toggle-label">Show Tooltip</label>
<div id="popup" class="popup">
<label for="showCheckbox" class="close-label"></label>
<p>I am looking for a job. Trainee/junior React dev. <br />📍Ukraine.</p>
</div>
</div>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. PasteMotion has already scoped any global rules to the element.
- Adjust the custom properties (--accent, --color-2, --color-3) on .container to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Neumorphism Glassmorphism Tooltip
Tooltips · @neerajbaniwal
- GPU-friendly
- No JS
- Reduced-motion ready
Subscription 3D Tooltip
Tooltips · @Yassin6up
- No JS
- Reduced-motion ready
Glowing Pulsing Tooltip
Tooltips · @Quezaquo
- No JS
- Reduced-motion ready
Message Gradient Tooltip
Tooltips · @Yaya12085
- GPU-friendly
- No JS
- Reduced-motion ready
Gradient 3D Notification
Tooltips · @John-CFO
- GPU-friendly
- No JS
- Reduced-motion ready