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.
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.
To install the extension, make sure you are in a Chrome browser and navigate to this link.
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.
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.
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.
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 🎉 🙌