Skip to Content

Hacking the BSP: Custom looking tooltips

code, pre {font-size:100%;}
pre, div.warning

pre h4, pre h5
font-size: 100%;
font-family: sans-serif, arial;
border-bottom: 1px solid black;
padding: 3px;
margin: 0px;
pre h4, div.warning {background-color: #fcc;}
pre h5 {background-color: #cfc;}

.sapTxtSml {font-size:x-small;}


Everybody like the “cool stuff”: Dynamic pages, used defined styles, cool looking controls, animation, falling snow etc.

There are many blogs written about how to use the “cool scripts” or “extension scripts” which are adding some script functionality to the boring HTMLB pages.

Now is my turn 🙂


    1. The script is provided “AS IS”
    2. The BSP team is not responsible for user-defined scripts on the page
    3. I do not guarantee that this script works correcly in all possible conditions (different browsers, different settings)
    4. If you find any problem with this script, please refer to me. Use comments for this blog.

What for a script

Tooltips. The little yellow windows which are popping up when one moves the mouse over the button, image or any element which “has the tooltip”. These tooltips are shown and hidden by the operating system and the web page normally cannot change their look and behavior. They are appearing after some timeout which many want to make smaller. They are disappearing after timeout which many want to make longer. Etc. Unfortunatelly all this settings are hidden somewhere in the registry as the system settings and the web page does not have control over them.

The only way to change tooltips look∧feel is to create own tooltips.

There are many free scripts in the internet for doing such things. I have found one which fits better in the HTMLB environment and adopted a little.

This script is easy to use and does not require to rewrite the whole page coding.

How to implement

Here are steps to implement the tooltips at the HTMLB page.

Download the script tooltips.js

Download the stylescheet tooltips.css </li>
<li>Import these files as MIME objects into your application or into public MIME folder</li>
<li>Add following code at the beginning of the page layout (within the <code>htmlb:page</code> element) <pre>
<code><% IF runtime->WITH_ACCESSIBILITY( ) IS INITIAL. %></code>

<link type=”text/css” href=”tooltips.css” rel=”stylesheet”>
<script language=”JavaScript” src=”tooltips.js” defer></script>
<code><% ENDIF. %></code>
<li> Change the <code>href</code> and <code>src</code> attributes accordingly to the path where you have placed the files).</li>
<li>Activate the page</li>
Note that when this script is used on the page, the screenreader can not read the tooltips. So I have added the <code>IF</code>
condidtion which disables this script in the accessibility mode.

How to customize

To customize the look of the tooltip – change the tooltips.css file.


You can set any values here. Just do not touch the visibility and position attributes. Also do not change the id (#tooltip).

To customise the timeouts and other script paramentes – change the tooltips.js file. See the possible parameters at the beginning and the approriate comments within the script file:


attr_name: “tooltip”, // the name of the…
blank_text: “(opens in the new window)”, // text for the links with…
newline_entity: ”  “, // use here the…
max_width: 0, // the maximum width of…
delay: 500, // delay before the…


The result

You can see how it works on this page. Just move the mouse cursor over this text and wait a bit before the tooltip appears. Also, since the script replaces all standard tooltips on the page, you can see the ones also on the blog control buttons (for example “Print This Article”).

You must be Logged on to comment or reply to a post.
    • Thank you for correction,
      I forgot to escape the ‘<‘ chartater so the closing tag is not shown on the page.

      Concerning the position:
      I do not understand why you want to set it to relative? The position is calculated correctly for absolute position, isn’t it? Or do you have the problems? Please describe them here.

      • The only issue I have seen so far is that it visually appears behind “dropdownListBox” and you can not read the tooltip when this happens
        • This is the known problem. Many controls are drawn by browser always on the top of all other page elements.
          There is a solution, I will try to implement it when I had a time.
          • To get around this we moved the field into it’s own “DIV” class/id.  Then inside the Java script we hide the DIV when a tooltip is show. 

            Is there a way that the Java script knows which tooltip is being executed?  If so we could write an IF statement to only hide the dropdown when the appropriate tooltip is executed. 

          • I added the following code to your java script to make the drop down hide for a specific helptext.  “Safety” is the ID of my DIV.

            if ( == ‘myRadioGroup_OSHATTPE__IllnessOSHA-lbl’ ||
                       == ‘myRadioGroup_OSHATTPE__IllnessOSHA-img’)
               = “hidden”, tooltip.delay;