code, pre {font-size:100%;} pre, div.warning code em 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;} hr .sapTxtSml {font-size:x-small;}
Start
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 🙂
Disclaimer
The script is provided "AS IS"
The BSP team is not responsible for user-defined scripts on the page
I do not guarantee that this script works correcly in all possible conditions (different browsers, different settings)
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 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>
</pre>
</li>
<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>
</ul>
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.
#tooltip
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:
/* SETTINGS */ 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... /* END OF SETTINGS */ </pre>
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").
