Adding Custom tooltips in Maximo

Maximo versions lower than 7.5 does not have built in Mouse hover functionality built in it. This tutorial can also be used with Maximo 7.5 and above also.

It was a requirement from one of the clients, they wanted to have mouse hover tool tips for certain fields in their application.

The final shape should be something like this:

It requires playing with some css files.

This is how I did it.

1. Open Application Designer (System Configuration – Platform Configuration -> Application Designer)

Search and open the application for which you want tool tips to show.

I am using Assets app for an example.

2. In this example, I will show how to show tool tips for the Asset and Status field in the assets.

Export the application definition using the button shown below.

It will show the xml definition of the app. Save it some where and do make a backup of that xml just in case.

Now open the xml and search for the following.

<multiparttextbox dataattribute=”assetnum“ descdataattribute=”description“ id=”main_grid8_1“/>
<textbox dataattribute=”status“ id=”main_grid8_4“/>

Find and Assetnum definition in it and add the labelcss = "tooltip assetnum" to it and for Status definition add labelcss="tooltip status". The part should now be like below.

<multiparttextbox dataattribute=”assetnum“ descdataattribute=”description“ id=”main_grid8_1“ **labelcss=”tooltip assetnum“**/>
<textbox dataattribute=”status“ id=”main_grid8_4“ l**abelcss=”tooltip status“**/>

Basically we have added these two properties

labelcss="tooltip assetnum" and labelcss="tooltip status"

Save the xml. Now click the import application definition button. It is adjacent the export button.

3. Now we have to fiddle with the CSS files. First, we will have to find the maximo CSS files in our MXServer.

We will be editing maximo_ex.css

For my environment its located in...

//AppServer/profiles//installedApps///maximouiweb.war/webclient/skins/skins/tivoli13/css

If you use the tivoli09 skin the maximo.css then use tivoli09/css instead of tivoli13/css

or Just search maximo_ex.css file in your server. Make a backup of it and start editing it.

In this case you will be editing the live css in the re built it will be overwritten. You should update the css in SMP folder as well to persist the changes in next deployment.

Add this line on top of it.

@import url("asset.css");

4. Now create a new file name it asset.css. Paste the below code in it.

.tooltip {
position: relative;
}
.tooltip::before {
content: &amp;quot;\2003&amp;quot; attr(class);
white-space: pre-wrap;
bottom: 50%;
display: inline-block;
position: absolute;
color: #000000;
background: #FFFF40;
padding: 5px;
opacity: 0;
transition: 0.3s;
overflow: hidden;
border-radius: 2px;
box-shadow: 0px 0px 3px #576E7D;
pointer-events: none;
margin: 5;
max-width: 100%;
}
.tooltip:hover::before {
opacity: 1;
bottom: 100%;
}

The highlighted lines are of interest here.

The classes in xml definition are linked to their definition in this css file. e.g. status we added in xml (labelcss=”tooltip status”). The text we write under status’s content will be shown as tooltip. Write whatever you want the tool tip to display in content. To add a line break add \A.

Copy this asset.css file to the same folder as maximo_ex.css

5. Delete your browser’s cache and re open Maximo. In Assets App open a record and Switch to Asset’s tab. Hover the mouse over Asset field it will display the tool tip. Similarly, hover the mouse over the Status field and another tool tip will be shown.

I hope this was helpful.