Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form below and we will reply as soon as possible.

  • Appcues Certifications & Training
  • Contact Us
  • Home
  • User Experiences
  • Building Web Experiences

Placing Tooltips/Hotspots

Updated at November 28th, 2022

Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form with the details about the help content you'd like to see.

  • Installation & Developers
    Installing Appcues Installing Appcues Mobile API & Data Troubleshooting Extras
  • User Experiences
    Web Experiences Building Web Experiences Building Mobile Experiences Customization & Styling Targeting Studio Troubleshooting Use Cases FAQ
  • Mobile
    Installation & Overview Building Mobile Experiences Mobile Analytics Troubleshooting Mobile Use Cases
  • Account Management
    Subscription Users & Data
  • Analytics
    Experience and Event Analytics Data
  • Best Practices
    Use Cases Pro Tips PLG FAQ
  • Integrations
    Integration Documents Use Cases Resources
  • Post-mortem
    System Incidents
+ More

Table of Contents

Adding Tooltips/Hotspots in the Builder Placing on Visible Elements Placing on Dynamic Elements Additional information

Out of our 4 main flow patterns, Tooltips and Hotspots are the ones that guide users through your application! They're meant to catch the attention of your users to a particular element or area. Because of that, the Builder gives you control over where you want to attach these patterns to your application.

Adding Tooltips/Hotspots in the Builder

Once you've opened the Builder to create a flow, select the green ' + Add' button > 'Tooltip group' to choose the design of your tooltip.

The Builder gives you some templates that you can quickly select, but you're free to create your own or use a previously saved Tooltip/Hotspot template!

Placing on Visible Elements

When you're ready to pin that Tooltip/Hotspot to an element, all you have to do is choose a design and click on an element in your application where you want the Tooltip/Hotspot to show up!

The area of the element will be highlighted in green so you'll know which part the pattern will be attached to.

Placing on Dynamic Elements

There will be cases where you'll want to attach a pattern to an element that will only appear after some hovering or clicking action from the user, such as a dropdown menu.

 

If this action does not change the URL, you can anchor a Tooltip/Hotspot without needing a navigation step!

To do this, hold down the SHIFT button on your keyboard > interact with your page to show the element > release the SHIFT button, and > attach the tooltip normally.

NOTE: When editing a tooltip/hotspot step where the target element isn't visible, it is expected for the step in the Builder to show a triangle caution (!) symbol, as well as a banner. Do not worry! This is normal and will disappear if the target/dynamic element is once again visible.

 

Additional information

At the technical level, Appcues distinguishes these elements based on the selector used for the element. Please see CSS Selectors for more information.

If an element resides in an iFrame, then you'll have to build the flow on the iFrame's source URL instead of the parent URL. Please see Using Appcues with iFrames for more information. Additionally, elements inside SVGs aren't currently supported so it wouldn't be possible to attach the patterns to those kinds of elements.

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • HTTP API (Developer)
  • Appcues Installation Overview
  • How Appcues is Overlaid
  • Single Sign-On (SSO)
Appcues logo

Product

Why Appcues
How it works
Integrations
Security
Pricing
What's new

Use cases

User Onboarding Software
Feature Adoption Software
NPS & Surveys
Announcements
Insights
Mobile Adoption

Company

About
Careers
we're Hiring

Support

Developer Docs
Contact

Resources

The Appcues Blog
Product Adoption Academy
GoodUX
Case studies
Webinar Series
Made with Appcues
Appcues University

Follow us

Facebook iconTwitter icon greyLinkedin iconInstagram icon
© 2022 Appcues. All rights reserved.
SecurityTerms of ServicePrivacy Policy
Expand