How to add styled tooltips to Webflow without using jQuery

<!-- Popper.js (required by Tippy.js for positioning) -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>

<!-- Tippy.js v6 -->
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

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

, a <span>, a Webflow Text element), also set Cursor to Pointer in the Style panel. Without it, iOS Safari won't recognize the tap, and the tooltip won't fire on touch devices.

The element is now marked. The tooltip won't appear yet. That requires the initialization call in Step 3.

3. Initialize Tippy.js in the footer custom code

Add the initialization call after your Tippy.js script tags.

In Site Settings → Custom code → Footer code, after the two script tags from Step 1, add:

<script>
  tippy('[data-tippy-content]');
</script>

This single call selects every element on the page with a data-tippy-content attribute and activates a Tippy.js instance on each one. Tippy.js automatically reads the attribute value as the tooltip content.

Customizing behavior

To customize behavior (position, animation, delay), pass an options object:

<script>
  tippy('[data-tippy-content]', {
    placement: 'bottom',   // 'top', 'bottom', 'left', 'right', or auto variants
    animation: 'scale',    // 'fade' (default), 'scale', 'shift-away', 'shift-toward', 'perspective'
    delay: [100, 200],     // [show delay in ms, hide delay in ms]
    arrow: true            // show the arrow pointer (default: true)
  });
</script>

Options apply globally to every tooltip on the page.

If you use any animation other than 'fade', load the corresponding CSS in Site Settings → Custom code → Head code:

<!-- Required for 'scale' animation -->
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css" />

Replace scale with shift-away, shift-toward, or perspective, depending on which animation you're using. Without this CSS, the animation setting is silently ignored, and the default \fade animation is used instead.

Using different settings per element

If you need different settings per element, say placement: 'right' on one element and placement: 'top' on another, initialize each set separately with a more specific selector, or use Tippy.js's data-tippy-* props to override per element:

<script>
  // Global defaults
  tippy('[data-tippy-content]', {
    placement: 'top',
    animation: 'fade'
  });
</script>

data-tippy-placement="right"  ← set this as a custom attribute on specific elements to override

The full list of available options is in the Tippy.js props reference.

Save, and your site is ready to publish. Tippy.js will activate on every element with data-tippy-content on page load.

4. Publish and test on the live site

Click Publish in the top right of the Designer. Select your domain and publish.

Once publishing finishes, open your live site URL. Custom code does not execute in the Webflow Designer canvas. In preview mode, custom code is turned off by default. You can enable it by clicking the "Enable custom code" toggle in the bottom left of the preview window.

Hover over any element you added data-tippy-content to in Step 2.

You should see:

• A tooltip bubble appears above the element (or at your configured placement)
• A fade animation plays (or your configured animation)
• The tooltip disappears when you move the cursor away

On mobile, the tooltip triggers on tap. The element must have cursor: pointer in its CSS for this to work on iOS Safari. If tapping does nothing, the troubleshooting section below covers the fix.

5. Render HTML content inside tooltips (optional)

By default, Tippy.js treats the data-tippy-content value as plain text.

To render HTML inside a tooltip (formatted content, icons, links), enable allowHTML:

<script>
  tippy('[data-tippy-content]', {
    allowHTML: true
  });
</script>

Then set the custom attribute value to an HTML string:

data-tippy-content  →  <strong>Required field</strong> — must be a valid email address

A few things to keep in mind here. allowHTML: true only matters if the browser needs to parse markup in the content string. For most tooltip use cases (plain labels, short descriptions), you don't need it. If you're using it, make sure the content is safe. Don't pass unsanitized user-generated strings directly into allowHTML: true tooltips.

For complex tooltip content beyond a short string (a card with an image, a formatted definition), you can reference an off-screen DOM element instead of an inline string.

What causes Tippy.js tooltips to fail in Webflow?

Most failures fall into four buckets: testing in the wrong environment, an attribute typo, the iOS tap issue, or a CSS containment conflict.

Here's how to identify and fix each.

Tooltips don't appear anywhere on the page

You've published the site and hovered over elements, but nothing happens.

Check 1: Are you testing on the live site? Custom code does not execute in the Webflow Designer canvas. If you're viewing the canvas or a share preview URL, Tippy.js isn't executing. Open your published domain or .webflow.io subdomain.

Check 2: Is the initialization script loading after the library? The tippy(...) call must run after both the Popper.js and Tippy.js script tags. All three blocks should be in the Footer code section, in this order: Popper first, Tippy second, your init script third. If the init script is in the Head code section, Tippy.js doesn't exist yet when it fires.

Check 3: Open the browser console. Right-click on the published page → Inspect → Console. If you see tippy is not defined or a 404 on the CDN URLs, one of the scripts didn't load. Check Site Settings → Custom code to confirm that the script tags are in the Footer code and that the URLs are correct.

Some elements get tooltips, others don't

Most elements respond, but a handful do nothing, even though they have data-tippy-content set.

Cause: The attribute name has a typo. Tippy.js selects elements using '[data-tippy-content]' exactly. One character off, and the element is invisible to the selector.

In the Webflow Designer, open Element Settings on the affected element and verify the custom attribute name is data-tippy-content, all lowercase, with hyphens, not underscores.

One thing that catches people: if the value is empty (data-tippy-content with no value set), Tippy.js still initializes on the element but shows a blank tooltip. Make sure every element has a non-empty value.

Tooltips don't trigger on iOS when tapping the element

Hover tooltips work on desktop. Tapping the same element on iPhone or iPad in Safari does nothing.

Cause: iOS Safari does not fire touch or click events on elements that aren't natively interactive (links, buttons, inputs) unless the element has cursor: pointer set in CSS. This is a long-standing Safari behavior, not a Tippy.js limitation.

Since Tippy.js uses the focus event for touch, and focus doesn't fire on non-interactive elements without this CSS property, the tooltip never activates.

Fix: Select the trigger element in the Webflow Designer. In the Style panel, find the Cursor property under Miscellaneous (or search "cursor" in the search bar) and set it to Pointer. Publish and test on iOS.

This is the single most-reported mobile issue for custom JavaScript interactions on non-interactive elements in Webflow. The cursor change is a one-click fix.

Tooltip appears but is clipped or hidden behind another element

The tooltip triggers, but part of it is cut off by a container or hidden behind a sticky header.

Cause 1: overflow: hidden on a parent container. Tippy.js appends tooltips to document.body by default, which should prevent most clipping. If clipping still occurs, a parent with overflow: hidden or overflow: clip is the likely cause. Check parent elements in the Style panel.

Cause 2: z-index conflict. Tippy.js defaults to z-index: 9999. If a fixed header or modal overlay has a higher z-index, the tooltip renders behind it. Override Tippy.js's z-index in the options:

<script>
  tippy('[data-tippy-content]', {
    zIndex: 100000
  });
</script>

Set this higher than whatever is covering the tooltip.