Now that we have learned about the different SmartTip types, we can discuss some additional things we can do to refine and improve our SmartTips. The two areas we'll look at in this lesson are:
- Customization
- Element Behavior
There are times where the color of the SmartTip feels like it doesn't match company branding, or we simply want to have a slightly different visual for the tooltip.
We can easily update the color scheme or change the icon type with a few easy out-of-the-box options which we will explore here.
| Customizing a SmartTip |
|---|
In this section we will go over how to customize the design of a SmartTip. |
| Step 1: Click on the SmartTip |
|---|
In the Editor, open up an existing SmartTip.  |
| Step 2: Edit Design |
|---|
Click Edit Design to open up all the available options for the SmartTip.  |
| Step 3: Edit SmartTip Message Box Options |
|---|
You will see 3 colored boxes after clicking on Edit Design. These refer to the message box that pops up when the user hovers over the icon. Text: Changes the color of the text font. The default set to black. Background: Changes the color behind the text. Default set to white as seen in the image. Border: Changes trim around the message box. Default set to blue. You'll see how the changes work with the GIF example, we've used hex code ff5f42 to change the border color.
|
| Step 4: Change Icon |
|---|
Next, we'll change the Icon by clicking on Change Icon.  |
| Step 5: Edit SmartTip icon |
|---|
When editing the SmartTip Icon, you have two sections to choose from: Shape: Allows you to choose images other than the "?", such as an "i" icon, "!" icon, etc. Color: Upon selecting a shape, you'll be given a selection of colors and sizes For the purpose of this guide, we'll make the following edits:
|
| Summary |
|---|
This is the result of the changes we made! While these customizations are limited, as you advance in your building skills we'll talk about more techniques to really make the SmartTip look and feel like part of the site.  |
| Getting Started with Element Behavior |
|---|
By default, SmartTips Set conditions are evaluated upon page load, and they will only play on a user’s screen if the element they are attached to is visible. This is done to optimize performance and user experience by keeping WalkMe from constantly checking for an element on the screen. |
| Step 1: Selected Element Tab |
|---|
However, there are instances when an element does not load at the same time as the page, or where the element on the page may disappear and then reappear. If a SmartTip is attached to one of these types of elements, then one or more of the following settings may need to be toggled ON. To toggle these functions, we'll look at the Selected Element tab.  |
| Step 2: Element Behavior Options |
|---|
There are three element behavior options:
* Popup menus, or modals, are windows that display on top of the main page and appear/disappear as a result of user action. Some examples could be:
 |
| Great Job! |
|---|
You know all about element behavior tab and its settings. SmartTips use these settings often especially when building inside of hover menus or popup modules. |
Note
While SmartTip conditions are evaluated upon page load, in the settings for individual SmartTip we can set conditions so it will be constantly checked by WalkMe.
Watch the video to see how adjusting the element behavior settings can improve your SmartTip performance.
Need a reminder of how WalkMe works?
In the Condition Builder course of the Builder 1 curriculum we talked about page load evaluation and continuous evaluation.
Watch the video for a quick refresher.
Okay, so we have now covered what SmartTips are, why they're useful, and how to create them. The next section will take you to an activity.
