shout

This website uses 🍪 to understand how you interact with it so we can improve the experience of everyone browsing it. By continuing your visit, you agree to its use of cookies. Learn more

All good!
🍪Preferences

This website uses cookies

Openli would like to use our own and third party cookies and similar technologies for

  • necessary purposes
  • analytical purposes
  • marketing purposes

You can set your preferences by selecting the options below. Withdraw your consent at any time via the shield icon.

Learn more about how we use cookies and who sets cookies on our website

Accept Necessary
Accept All
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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
© 2024 The Code Raccoons. All rights reserved.
Privacy Policy