Tooltip

Add interactive, customizable tooltips to any element. Enhance user experience with helpful information on hover.

CDN ScriptDocumentationExample

Copy the Tooltip <script> and paste into the <head> of your page

<!-- [WebTricks by CodeRaccoons] - Tooltip -->
<script async src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/Tooltip.min.css" ></script>
Copy Script

Required attributes

I want this element to have a tooltip on hover
Attribute to add
Name
wt-tooltip-content
Value
{Tooltip text}
Instructions

The content within this attribute will be the text displayed by the tooltip.

How does it look?
Optional
I want this tooltip to appear in a different position instead of the default
Attribute to add
Name
wt-tooltip-position
Value
{position}
Instructions

This attribute can have the following combinations:

  • align-right
  • align-left
  • bottom align-left
  • bottom align-right
How does it look?

Optional Attributes

I want this element to have a tooltip on hover
Attribute to add
Name
wt-tooltip-content
Value
{Tooltip text}
Instructions

The content within this attribute will be the text displayed by the tooltip.

Where?
Add this to any element you want to have a tooltip on.
How does it look?
Optional
I want this tooltip to appear in a different position instead of the default
Attribute to add
Name
wt-tooltip-position
Value
{position}
Instructions

This attribute can have the following combinations:

  • align-right
  • align-left
  • bottom align-left
  • bottom align-right
Where?
Add this attribute to the element with the wt-tooltip-content attribute you want to edit.
How does it look?

Working examples

See the Pen Semi-transparent tooltip · CSS only by Code Raccoons (@jorchie) on CodePen.

‍

Information
ProjectsBlogCV
Contact me
Send me a Message
© 2023 The Code Raccoons. All rights reserved.
Privacy Policy