Set target for tooltips

Learn how to set target elements for boardme tooltips.

Overview

Whenever you want to show a Tooltip type guide in boardme, you will be asked to set the Target Element for the Guide.

The Target Element represents the HTML element to which the Tooltip is pointing. Cards and Modals can be shown without a target, but a tooltip's purpose is to point to a specific element on the user's screen.

The technique boardme uses to select the element, is the exact same technique Front-End developers and designers use to style the elements in the HTML.

No need to worry though, the first part of this guide will walk you through how you can automatically generate these selectors by pointing and clicking on elements on the screen, and without knowing anything about HTML or CSS.

Not technical? No problem.

All you need is a Chrome browser and a Chrome Extension to get started with copying target element selectors from any website.

Get Up and Running with Selector Gadget

Using the Selector Gadget Chrome extension is the easiest way to generate selectors for your Tooltips. It automatically generates the right selector for you regardless of the complexity of the page.

You'll need to follow 4 simple steps to configure a target element for a Tooltip.

• Install the Selector Gadget Chrome extension.

• Navigate to your website and activate the Chrome extension.

• Generate the Selector by clicking on the element of your choice.

• Copy the Selector and paste it into boardme.

Let's run through these steps one by one.

Installing Selector Gadget

To install the extension, make sure you are in a Chrome browser and navigate to this link.

Click the Add to Chrome button to add the extension to your browser.

Once installed, you should notice a little magnifying glass icon 🔍 among your Chrome extensions near the URL bar.

Activating Selector Gadget

If Selector Gadget is added to your browser, all you need to do to activate it is to Click on the magnifying class icon 🔍 and hover over the elements in your browser.

You'll notice boxes will start to appear around the Elements you hover over. This is exactly what we need, and in case you want to deactivate it, just click on the icon again.

Generating a Selector with the Selector Gadget

Once you can activate it and deactivate it freely, it is time to start generating Selectors.

To generate selectors you'll need to Activate the Selector Gadget, hover over the element of your choice, and Click on it.

Now your selector is being generated. Your only task is to click on any elements that have a yellow background if they appear. This process will exclude those elements from your selector!

You should end up with one element that has a green background, and no yellow background elements around the page.

Second Click on Yellow!

Make sure you clicked the Elements that have a yellow background to exclude them from the Selector.

Set the Selector as the Target of Your Tooltip

You now have a single element with a green background and no yellow elements. Congrats, you have your Selector!

The panel in the lower-left corner contains your Selector.

Click inside the input, and copy the Selector that Selector Gadget generated for you.

Once you have the Selector on your clipboard, you can navigate to boardme, and paste it inside the Selector input.

Congratulations! You have a Target Element configured for your Tooltip 🎉 🙌

Publish!

Make sure to publish the changes to your flow for them to take effect.