Adding Custom tooltips in Maximo

As we all know Maximo versions lower than 7.5 does not have built in Mouse hover functionality built in it. It 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:

Untitledgdas

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.

CropperCapture[63]

Export the application definition using the button shown below.

appldefinition.jpg

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.


<tab id="main" label="Asset" type="insert">
<section border="true" id="main_grid8">
<sectionrow id="main_grid8_11">
<sectioncol id="main_grid8_11_1">
<section id="main_grid8_11_1_1">
<multiparttextbox dataattribute="assetnum" descdataattribute="description" id="main_grid8_1"/>
<textbox dataattribute="status" id="main_grid8_4"/>
<checkbox dataattribute="islinear" id="islinear" licensekey="LINEAR"/>
</section>
</sectioncol>

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.


<tab id="main" label="Asset" type="insert">
<section border="true" id="main_grid8">
<sectionrow id="main_grid8_11">
<sectioncol id="main_grid8_11_1">
<section id="main_grid8_11_1_1">
<multiparttextbox dataattribute="assetnum" descdataattribute="description" id="main_grid8_1" labelcss="tooltip assetnum"/>
<textbox dataattribute="status" id="main_grid8_4" labelcss="tooltip status"/>
<checkbox dataattribute="islinear" id="islinear" licensekey="LINEAR"/>
</section>
</sectioncol>

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.
/opt/IBM/<WebSphereInstallaionDir>/AppServer/profiles/<AppServerName>/installedApps/<cellname>/MAXIMOUI.ear/maximouiweb.war/webclient/skins/skins<deploymentdate>/tivoli13/css

If you use the Tivoli09 skin the maximo .css can be found here:
<maximo_root>\applications\maximo\maximouiweb\webmodule\webclient\skins\tivoli09\css

If you do not use the Tivoli09 skin use the maximo.css file found in:
<maximo root>\applications\maximo\maximouiweb\webmodule\webclient\skins\css

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

Add this line on top of it.


@import url(&amp;amp;amp;amp;quot;asset.css&amp;amp;amp;amp;quot;)

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


.tooltip {
position: relative;
}
.tooltip::before {
content: &amp;amp;amp;amp;quot;\2003&amp;amp;amp;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%;
}
.assetnum.tooltip::before {
content: &amp;amp;amp;amp;quot;The Asset num etc . Some other Text:&amp;amp;amp;nbsp; \A \A E.g \A ABC \A XYZ&amp;amp;amp;amp;quot;;
}

.status.tooltip::before {
content: &amp;amp;amp;amp;quot;The Status reflects status of the item. Some other text to display etc .&amp;amp;amp;amp;quot;
}

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s