Is Your Smart-Tip Masked by the HTML Element? It Could Be a Z-Index Issue

Are you experiencing difficulty seeing your Smart-Tip () or Beacon due to the HTML elements of the host application masking it? Or is the disabled-element icon () invisible due to being masked by the HTML elements? If so, you may be facing a Z-Index issue.

What is a Z-Index Issue

A Z-Index is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index value are placed on top of those with a lower index value.

Sometimes, OGL Items (Smart-Tips/Tooltips/Beacons/Disabled-element icon) are not visible as an HTML element with a higher Z-Index value is masking them. To resolve this, we must set a higher Z-Index value for the OGL elements like Smart-Tips, Beacons, etc.

Note:

Z-Index only works on elements with the following attribute (position: absolute, position: relative, or position: fixed), and where a Z-Index is not defined, it will have a default value of "auto."

Steps to Reproduce

Note:

Prerequisites

An OGL account with a Design Kit that has a lower Z-Index code for Smart Tip or Beacon.
A host application with a dropdown or pop-up menu in its UI.

Follow the below procedure to reproduce the Z-Index issue.

On the OGL homepage, select Smart-Tip.

The New Content modal window is displayed.
Enter the Display Name.
Enter the Location URL of the host application (that has a dropdown or pop-up menu in its UI).
Select the Create button to create the Smart Tip.

The OGL Editor now appears as an overlay to the host application.
Select Add a Step.
On your host application, navigate to any UI that has a dropdown or pop-up menu.
Expand the dropdown menu and choose any one option from the menu to add a Smart-Tip.
Hover over the option of your choice and select the Add Tip button.

The Smart Tip now appears but is positioned further away from the dropdown option.
To bring the Smart Tip right next to the dropdown option, select Step Settings ()to go to Display Settings.
Lower the Help icon offset: (left)value to bring the Smart-Tip closer to the dropdown option.

As you lower the value, you can observe the Smart-Tip moving toward the dropdown HTML element.

Once the Smart-Tip and Dropdown HTML elements intersect, the Smart-Tip hides behind the Dropdown element instead of overlapping it.

The Z-Index issue is now recreated.

Set a Higher Z-Index for OGL Elements

Suppose you recently enabled OGL in your host application and are experiencing the issue mentioned above. In that case, it could be caused by the Z-Index issue.

The HTML element on which the Smart-Tip or the Beacon is not showing up is probably using a higher Z-Index value than the one OGL uses. Hence, the OGL elements are active in the background and not on top of those HTML elements.

The workaround here is to add new codes for the Smart-Tip/Beacon and the disabled-element icon with a higher Z-Index value. This allows the elements to appear and not be hidden in the background.

Note:

For Smart-Tip and Beacon, always set a Z-Index value at least one digit higher than the Z-Index of HTML elements. This is the recommended setting.
The value of "2147483647" is the highest limit allowed for Z-Index on any element. However, using a value higher than or equal to the Z-Index value of the OGL widget is not a good idea as this could cause the Smart Tip or Beacon to appear over the widget in applicable situations.

The workaround includes the following steps:

Downloading the Design Kit.
Updating the Design Kit (Adding the new codes with a higher Z-Index value).
Uploading the updated Design Kit.

Download the Design Kit

The existing Design Kit can be downloaded from the OGL Console.

To download the Design Kit:

On the OGL Console homepage, select Settings>Theme.

The Theme modal window appears now.
Go to the Upload/Download Theme tab.
Select the Download Design Kit HTML link.

The browser now downloads the OGL_Theme_Design_Kit_XXXXXXX.html file.
Save the HTML file to a local directory.

Note:

Rename the file accordingly. We highly recommend you rename it using the following convention: Design_Kit_ORGNAME_DD_MMM_YYYY.

Update the Design Kit

The Design Kit provides the ability to update the theme however you want. But this article only gives some basic guidelines on updating/adding the Z-Index code for Smart Tips and Beacons.

Note:

Please note that modifying the Theme (Design Kit) might impact accessibility. For more information about Oracle's commitment to accessibility, see https://oracle.com/accessibility.

Note:

You need an HTML Editor to update the Design Kit.

To add the new codes with a higher Z-Index value:

Open the Design Kit with the HTML/text editor.
Copy the below lines and paste them into the Design Kit. (Before pasting it to the design kit, make sure to update the Z-Index value as necessary.)
Note:
- Set a Z-Index value at least one digit higher than the Z-Index of HTML elements.
- Only if the host application's HTML elements are using the highest limit allowed, i.e., "2147483647" then set the Z-Index for Smart Tip as "2147483647 !important". This will override the higher value set by the HTML elements and gives priority to OGL elements.
```
Increasing Z Index*/

.ir-marker {
 z-index: 99999999999 !important;
}

div.ir-showBeacon {
    z-index: 99999999999 !important;
}

div.ir-showMarker {
    z-index: 99999999999 !important;
}

div.sttip .tooltip {
    z-index: 99999999999 !important:
}

div.stDisableDiv {
  z-index: 99999999999 !important;
}  
```
Save the changes, then upload the Design Kit to the OGL Console.

Upload the Design Kit

To upload the Design Kit

On the OGL Console homepage, select Settings>Theme.
Go to the Upload/Download Theme tab.
Select the Choose a file button and choose the updated Design Kit from the local drive.
After selecting the updated theme, choose between creating a new theme or updating the current one according to your preferences.
Select the Upload button.
Once the Design Kit is uploaded, a confirmation message appears.

Verify the Issue

Verify the Smart-Tip or the Beacon is now visible and no longer hidden behind the dropdown or popup menu HTML elements.

Let's compare the screenshots before and after the workaround.

Before the workaround:

After the workaround: