Sometimes clicking is a lot of work. Literally.

Creating elegant tooltip boxes in SAP Design Studio applications is not as simple as it could be. Often we need tooltips to describe the content. This leads us to script text and/or panel components to appear when a user clicks on a button or icon. Then, we must add additional scripting to hide the tooltips when the user no longer needs them. We do all of this simply to provide contextual information for the user.

I propose a better solution involving only Cascading Style Sheets (CSS) and a few basic components, and the result will look something like the tooltip in the image below:

The idea is simple. The user should only have to mouse over the icon to see the relevant information and that information should simply disappear when the user changes their focus (moves their mouse).

The beauty of using classes instead of scripting is that we can easily reuse the class and even separate the styling from the action for maximum reusability.

Let’s build it!

Components

First we will create our components. We only need two components to make the effect work. The first, a panel, will act as the icon and container for the second, which is simply a text component.

Side Note: I am going to use CSS to turn my panel into an icon but we can just as easily place an Icon component inside of this Panel to achieve the same goal. I recommend picking one solution and being consistent with its implementation throughout your application.

Panel

For my example, I am building an information icon into the upper right corner of a content section (fancy name I use for a group of panels laying out content) so I’ll be using the following layout settings for my Panel:

We want everything justified to the right (Left Margin: auto) so that the components remain right-aligned even if we change the size of the parent container.

Done! Now on to the text component that we will use as our tooltip.

Text

Inside of the panel we just made, we will nest a text component. We want the text component to also have right alignment so the layout settings should resemble the panel we just made. I used the following:

Components Together

Finally, the resulting structure should look like:

I am using this solution in a set of panels. In the image below, I have highlighted the panels we created:

That’s it! The most important components are the single panel component (PANEL_SECTION_INFO) and the child text component (TEXT_SECTION_INFO). The last image I presented was only to show this solution in a use scenario.

Side Note: If you decided to use the icon component, nest it inside of the panel with the text component. I would set the margins of the icon to zero and the height and width to auto. This will allow you to use the parent panel to size the icon and prevent issues where the icon is larger than the panel.

CSS

The styles are where the magic happens. We will set all visual properties as well as hover effects through CSS.

Set Component Classes

First we’re going to set the “CSS Class” properties of our two components. I’ll be using .evtInfo for the Panel component and .evtInfoText for the Text component. These names can be anything but we need them for the style sheet so remember the ones you decide to use.

I’m going to post all of the CSS I’m using for this effect. Afterward, I’ll write some notes about the important bits.

Class .evtInfo

I want to start by saying that you can ignore the properties in this class if you decide to use the icon component but the class should still exist. I’ll explain more about this later in the article.

Here is the code:
.evtInfo {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
background-color: #ffffff;
color: #008fff;
font-size: 16px;
font-family: fontAwesome;
line-height: 20px;
border-radius: 50%;
cursor: default;
}

/* Icon */
.evtInfo:before {
content: "\f129";
}

How It Works

The first four lines inside of the class all deal with Apache Flex. I won’t go into detail about how Flex works in this article but I’m using it to center the icon in the panel. Background-color and color decide the background and font color. Font-size will determine the height of the character I’m using for the icon and I’m using Font Awesome for the font (again I’m not going into specifics on how to use custom fonts here). You can feel free to use sapui5 as your font to use the SAP standard icons. Line-height should be the same as your panel height. Border-radius is giving the background its circular shape. Cursor is there to get rid of the text cursor and make it the default pointer icon when the user puts their mouse over the icon.

Finally, I have the class with pseudo element :before to actually place the icon.

Class .evtInfoText

For this class, I only plan on discussing the main class and it’s hover state. Discussing the effect for the triangle above the tooltip is outside the scope of this article but I’m including it here for your convenience.

Here is the code:
.evtInfoText {
position: absolute;
z-index: 1;
right: -20px;
top: 35px;
background-color: #ffffff;
color: #6f7d95;
font-family: 'Lato', sans-serif;
border: 1px solid #c4d5e4;
border-radius: 4px;
padding: 5px;
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.15);

pointer-events: none;
opacity: 0;
transition: opacity 200ms ease-in-out;
}

/* Triangle border */
.evtInfoText:before {
content: "";
position: absolute;
z-index: 2;
top: -22px;
right: 19px;
border-width: 11px;
border-style: solid;
border-color: transparent transparent #c4d5e4 transparent;
}

/* Triangle body */
.evtInfoText:after {
content: "";
position: absolute;
z-index: 3;
top: -20px;
right: 20px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #ffffff transparent;
}

.evtInfo:hover .evtInfoText {
opacity: 1;
}

How It Works

Here, in the first class, I’m using position and z-index to make sure that the tooltip is always above surrounding elements while right and top are just nudging the element to the position I want it. The only other tags of note in the main class are the last three which I have set out at the bottom of the class. Pointer-events keeps the mouse from triggering the :hover state when users mouse over the invisible element. Opacity is making the element invisible and transition is defining my animation.

The last class handles the hover state and is what drives this whole effect. This is why nesting the text element inside of the panel is so important and why we still need the .evtInfo class. We want to select the element with class .evtInfoText that is the child of an element with .evtInfo and change its opacity from 0 to 1.

.evtShow (optional)

This is a nice little class to add while adding text and adjusting the size of your tooltips.

Here is the code:
.evtShow {
opacity: 1 !important;
}


This class is used in addition to the .evtInfoText (or whatever name you used) to show the text box. Like this:

When you finish adding text and sizing the tooltip, you can remove evtShow.

Conclusion

That’s it! I hope you found this interesting and useful. This effect can be in other ways and maybe one day something similar will be provided with the SAP icon component.