Top
Login
Contents x
Customize Tooltip
  • 13 Jun 2024
  • 3 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Contents

Customize Tooltip

  • Updated On 13 Jun 2024
  • 3 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Article summary

After creating a Tooltip, customize it based on your requirements.

Whatfix enables you to customize the following in a Tooltip:

  • Add Body and Header content
  • Add images, and GIFs
  • Add buttons and attach external and deep links
your title goes here

The customization options differ based on the Tooltip template you choose.

On the Whatfix Mobile Studio, choose a Tooltip template, and then click the Tooltip to configure the following:
tooltip_template

Header

  • Under the Header section, edit the Header text, change the font, font size, font weight, text alignment, text color, and bottom margin. Add user property to personalize the experience for your end user.
    header_popup

  • Align the Header to the top or bottom, add any content block, or delete the Header section using the action bar
    header_

Body

  • On the Body of the Tooltip, edit the text, font, font size, font weight, text alignment, text color, and bottom margin. Add user property to personalize the experience for your end user.
    design_body

  • Align the Body text to the top or bottom, add any content block, or delete the Body section using the action bar
    body_control

Topspacer

Increase, decrease, or delete the Topspacer using the action bar.
control_topspacer

Media

  • Under the Media section, click the Edit icon to add images and GIFs to your Tooltip from your local drive and then configure the image size, alignment, and bottom margin.
    media_popup
your title goes here

The image formats supported are .jpg, .png, and .svg.

  • Enable the CLICK ACTION toggle to link any action to your image. Clicking the image triggers the action that you configure.
    click_action

    Button Action Description
    Dismiss When the user clicks the media, the Tooltip is dismissed from the app screen
    External Link When the user clicks the media, they are routed to the URL that is attached to the media
    Deep Link When the user clicks the media, they are routed to the app screen within the same app that is attached to the media
your title goes here

Provide a name for the action you add to your media using which Whatfix enables you to track the analytics on how many users are clicking the media.
click_events

  • Align the Media to the top or bottom, add any content block, or delete the Media section using the action bar.
    tooltip_action_bar

Buttons

  • Customize the button that appears on your Tooltip. Choose to have one or two buttons, adjust the button width, alignment, height, radius, and the bottom margin.
    button_config

  • Click the BUTTON dropdown to customize the individual buttons. Change the button color, stroke of the button outline, text, font family, font size, font weight, and button action. Add user property to personalize the experience for your end user.
    individual_button

Configure the following are the Button Actions:

Button Action Description
Dismiss When the user clicks the button, the Tooltip is dismissed from the app screen
External Link When the user clicks the button, they are routed to the URL that is attached to the button
Deep Link When the user clicks the button, they are routed to the app screen within the same app that is attached to the button
  • Align the Buttons to the top or bottom, add any content block, or delete the Buttons using the action bar
    button_tooltip_action_bar

Layout

  1. In the navigation bar, click Layout to enable Overlay, change the Tooltip color, Tooltip size, and add Ripple Effect.
    2023-02-06_16-48-23.png
your title goes here
  • Click the Edit icon to do the same.
    editiconmobile.png

layout_options

  • Change the Fill Color of the Overlay and enable your end user to dismiss the Tooltip by clicking the Overlay.
    overlay_options_tooltip

  • If you anchor your Tooltip to an element on the screen, change the shape and radius of the highlighted element. Enable your end users to dismiss the Tooltip by clicking the anchor element.
    mask_tooltip

  1. Click Done.
    done_tooltip

your title goes here
Was this article helpful?
What's Next
Privacy Policy | Whatfix Glossary | Whatfix Platform Status
Copyright © 2024 WHATFIX TM. All rights reserved.
Change password!
Changing your password will log you out immediately. Use the new password to log back in.
Change profile
Success!
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.
Logout