A Complete Guide to Custom Tooltips with Tippy.js in Webflow

---

Tooltips are a simple yet powerful way to provide extra information to users without cluttering your UI. Tippy.js is a lightweight, highly customizable JavaScript library for tooltips and popovers. In this guide, we'll cover basic usage, advanced features, and custom themes.

---

Before using Tippy.js in your project, you need to include the necessary scripts and styles in your HTML:

1. Popper.js – required for positioning tooltips correctly.

2. Tippy.js – the main library.

3. Optional themes – like the built-in light theme.

     <script src="https://unpkg.com/@popperjs/core@2"></script>
     <script src="https://unpkg.com/tippy.js@6"></script>
     <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
   

Once these scripts are added, you can create simple text tooltips, HTML tooltips, custom themes, interactive tooltips, and more, all with just a few lines of JavaScript.

1. Basic Tooltip

To create a simple tooltip, select the element using a CSS selector and pass a content property:

tippy('[dev-target="default-tooltip"]', {
  content: 'My tooltip!',
});

Explanation:

• [dev-target="default-tooltip"] selects the element with the attribute dev-target="default-tooltip".

• content is the text that appears inside the tooltip.

---

2. Tooltip Placement

You can place tooltips on different sides of an element using the placement property:

tippy('[dev-target="tooltip-top"]', { content: "Tooltip on top", placement: "top" });
tippy('[dev-target="tooltip-right"]', { content: "Tooltip on right", placement: "right" });
tippy('[dev-target="tooltip-bottom"]', { content: "Tooltip on bottom", placement: "bottom" });
tippy('[dev-target="tooltip-left"]', { content: "Tooltip on left", placement: "left" });

Explanation:
placement accepts top, right, bottom, and left.

---

3. HTML Inside Tooltips

Tippy supports HTML content with the allowHTML property:

tippy('[dev-target="html-tooltip"]', {
  allowHTML: true,
  content: "<strong>Bold text</strong> and <em>HTML</em>",
});

Tip: Use HTML wisely to avoid accessibility or security issues.

---

4. Triggering Tooltips

Tooltips can be triggered in various ways:

tippy('[dev-target="click-tooltip"]', { content: "Opens on click", trigger: "click" });
tippy('[dev-target="focus-tooltip"]', { content: "Opens on focus", trigger: "focus" });

Other trigger options include mouseenter, manual, and focusin.

---

5. Animations & Delay

Control how tooltips appear and disappear:

tippy('[dev-target="delay-tooltip"]', { content: "Appears with delay", delay: [600, 0] });
tippy('[dev-target="animated-tooltip"]', { content: "Smooth animation", duration: [700, 500] });

• delay: [show, hide] adds a pause before showing or hiding.

• duration: [show, hide] controls the animation speed.

---

6. Themes

Tippy has built-in themes and also supports custom ones:

tippy('[dev-target="light-tooltip"]', { content: "Light theme tooltip", theme: "light" });

Custom Theme Example

.tippy-box[data-theme~='my-custom-theme'] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 12px;
  border-radius: 8px;
  background: #F9F9F9;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.tippy-box[data-theme~='my-custom-theme'] .tippy-content {
  color: #787878;
  font-family: Manrope;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  padding: 0;
}

.tippy-box[data-theme~='my-custom-theme'] .tippy-arrow {
  color: #F9F9F9;
}

tippy.delegate('body', {
  target: '[dev-target="custom-tooltip"]',
  theme: 'my-custom-theme',
  content: 'Hello this is a custom theme',
  allowHTML: true,
  placement: 'left',
  offset: [0, 12],
});

✅ Explanation:

• .tippy-box[data-theme~='my-custom-theme'] targets all tooltips using your custom theme.

• tippy.delegate is used to apply tooltips to multiple elements dynamically.

---

7. Max Width for Long Text

tippy('[dev-target="long-text-tooltip"]', {
  content: "This tooltip supports long content and wraps nicely.",
  maxWidth: 250,
});

Ensures text wraps without overflowing the tooltip container.

---

8. Interactivity & Follow Cursor

• Interactive Tooltip allows hovering inside the tooltip without it disappearing:

tippy('[dev-target="interactive-tooltip"]', { content: "You can hover inside me!", interactive: true });

• Follow Cursor Tooltip moves with the mouse:

tippy('[dev-target="follow-tooltip"]', { content: "I follow the mouse", followCursor: true, placement: "right" });

• Sticky Tooltip adjusts position dynamically while hovering:

tippy('[dev-target="sticky-tooltip"]', { content: "Sticky tooltip", sticky: true });

---

9. Reusable Tooltips

You can assign the same tooltip to multiple elements:

tippy('[dev-target="multi-tooltip"]', { content: "Same tooltip for many elements" });

---

Summary

Tippy.js is versatile and easy to use. Key takeaways:

• Supports plain text and HTML.

• Multiple trigger types and placements.

• Custom styling and themes.

• Advanced interactivity like follow-cursor, sticky, and interactive tooltips.

With these features, you can create highly functional, visually appealing tooltips for your web projects.

---