Tooltip

Add a tooltip to any element in your page with just 1 attribute.

Loads
CDN ScriptDocumentationExample

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

<!-- [Webflow Trickery by CodeRaccoons]  -->
<script async src= "https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebflowTrickery@1.0.0/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.

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?

Working examples

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

‍

Need more?

Do you need multiple instances of this Attribute?

All of our attributes follow the same structure for multiple instances!

In order to use multiple instances on an attribute add -n at the end of the value of the element attribute. being "n" a unique number.

This unique number is how we can tell between multiple instances.

For example, container-2, trigger-2, and target-2 will all be connected to the same instance.

This is what you need to add multiple instances of this:

‍

First attribute instance
No items found.
Second instance
No items found.
Third instance
No items found.
Information
Blog
Tools
About
Cookies
Privacy Policy
© 2023 The Code Raccoons. All rights reserved.