Clew

How to add a tooltip on WordPress without a developer

A contextual hint on WordPress: one sentence next to the element where visitors hesitate, placed with a click in the visual editor and shown exactly when it helps.

Time
● 10 minutes
Price
Free plan
Who does it
WordPress administrator

Example: a tooltip on WordPress

A WooCommerce shop sells digital templates, and customers can’t find their files. On /my-account a tooltip points at the Downloads tab: “Your files are here — links never expire”.

Free on the Clew Free plan — no card, no time limit: one site and up to 3 published tours or tooltips. Audience rules and A/B tests come with Pro.

How to add the tooltip on WordPress, step by step

  1. Step 01

    Copy your Clew snippet

    Create a free account (or sign in), add your site and open Admin → Overview. Click the line in the “No signal from the widget yet.” card to copy it — it carries your real site key instead of the placeholder.

    <!-- Clew: replace PASTE_YOUR_SITE_KEY with the site key from Admin > Overview -->
    <script src="https://tryclew.io/widget/PASTE_YOUR_SITE_KEY.js" async></script>
    Clew admin Overview with the embed line and a masked site key (tooltip on WordPress)
    Step 1 · schematic illustration
  2. Step 02

    Install a header code plugin

    In Plugins → Add New install and activate the free WPCode plugin (or use your theme’s own “header scripts” option). Don’t edit header.php: theme updates overwrite it.

    Paths to the head code field in popular CMS, including WordPress WPCode (tooltip on WordPress)
    Step 2 · schematic illustration
  3. Step 03

    Paste the line into the Header box

    Open Code Snippets → Header & Footer, paste the Clew line into Header and press Save Changes.

    A Header code field with the Clew script tag pasted (tooltip on WordPress)
    Step 3 · schematic illustration
  4. Step 04

    Purge the cache

    If you use WP Rocket, LiteSpeed Cache, W3 Total Cache or a CDN, purge the cache. In “delay JavaScript” settings, exclude tryclew.io/widget.

    A caching plugin toolbar with the Clear cache action highlighted (tooltip on WordPress)
    Step 4 · schematic illustration
  5. Step 05

    Attach the tooltip to the element

    In Clew open Flows → + New flow, keep Step-by-step tooltips and press Edit on your site. On your page press Pick element, click the field or button, and write a short title and one sentence. Set Placement if the automatic position covers something important.

    A tooltip bubble next to a form field on a website, with a short explanation (tooltip on WordPress)
    Step 5 · schematic illustration
  6. Step 06

    Choose where, when and for whom it shows

    In the same editor, set Where to show (page URL), When to show, Audience targeting and Frequency. These are the settings of the example above:

    SettingValue
    FormatStep-by-step tooltips
    Where to show (page URL)Section by prefix /my-account
    When to showRight on page load
    Audience targetingNo rules — everyone who opens the page
    FrequencyOnce per visitor
    Clew tour editor with the format, page URL rule, trigger and audience rule fields (tooltip on WordPress)
    Step 6 · schematic illustration
  7. Step 07

    Publish and check it on the live site

    Set Status to Published and save. Open the page in a private window — Clew remembers who has already seen a “once” item, so your usual browser may skip it. Views, completions and drop-offs appear in the tour stats.

    Clew admin Overview with the green “Widget is live” card (tooltip on WordPress)
    Step 7 · schematic illustration

Pitfalls: tooltip on WordPress

“Delay JavaScript” hides the tooltip until interaction

WP Rocket, LiteSpeed and Perfmatters can postpone scripts until the first scroll or click. The widget then starts late and a Right on page load item looks broken. Add tryclew.io/widget to the exclusions.

Theme and plugin updates rename tabs and buttons

WooCommerce and theme updates occasionally change the markup of account tabs and product forms. Anchor the hint to an element with a stable class such as woocommerce-MyAccount-navigation-link--downloads rather than its position, and glance at Health after updating plugins.

Prefer ids and data attributes

If Pick element suggests a long chain of classes, choose the nearest parent with an id or ask for a data-tour attribute — a stable selector keeps the hint alive through theme updates.

Questions and answers

Does it work with page builders like Elementor?

Yes. Clew works on the rendered page; pick the element with Pick element whatever built it.

Does it work on WordPress.com?

Plugins such as WPCode need a WordPress.com Business plan or higher. Self-hosted WordPress works on any hosting.

Will it show in wp-admin?

Header plugins usually add code to the public site only. For guides inside /wp-admin, add the line with an admin-side snippet (WPCode can target the admin area).

Is the tooltip free?

Yes, on the Free plan — up to 3 published tours and tooltips on one site.

Can the hint open on click only?

Yes. Choose On click on an element and enter the selector of the icon or link that should open it, and set Every visit.

One line on your site — then tours, tooltips and checklists without releases.

Get your site key — freeHow Clew worksFree plan forever, no credit card

Product tours, popups and onboarding in the age of AI

7 patterns with step counts, copy rules and what to measure, what AI changes, and a checklist before you publish. PDF, 2 pages. What is inside →