Enhanced tooltip
Intrexx 5 allows you to edit Cascading Style Sheets (CSS) directly. This allows you to achieve interesting display effects. Used together with tooltip windows, you can create modern, visual effects, for example. In this workshop you will learn how to implement this in your own portal.First you need to copy the default style definition of the modal tooltip, paste it as a new style class library and rename it afterwards. Then the specific styles can be edited.
The classes for tooltip windows can be found in the Layout Designer in the layout controls under controls -> tooltip:
Via right-click the existing object TT_MODAL can be copied and pasted as a new entry. A dialogue comes up and lets you modify class and title:
Using specific styles for tooltip windows
In order to assign the new style to a tooltip it is required to enter the name of the style class in the expert attributes of the button opening the tooltip. The expert attribute needs to be named tooltip-classname and contains a text value:
Glowing Tooltip Window
The first example creates a tooltip with a glowing border. This effect uses the style property box-shadow. It needs to be modified for use in different browsers.
Copy the style of the modal tooltip, paste it and rename it to TT_MODAL_SHINY. Next modify the CSS as listed below. This statement contains box-shadow styles for Internet Explorer, Mozilla Firefox (moz) and Safari (webkit).
.TT_MODAL_SHINY
{
border: 1px solid rgb(0,0,0);
background-color: rgb(250,250,250);
box-shadow: 0 0 100px rgb(205,205,205);
-webkit-box-shadow: 0 0 100px rgb(205,205,205);
-moz-box-shadow: 0 0 100px rgb(205,205,205);
}
Transparent Tooltip Window
In order to create a transparent tooltip window please remove all attributes in the style settings.
.TT_MODAL_SHINY
{
}
We can now place an image with a transparent border (GIF or PNG format) on the page displayed in our tooltip window. It is recommended to use images with shadows.
Furthermore, it is important to avoid the close-icon and the page title in the modal tooltip.
Ideally the image placed on the transparent tooltip window is an image button which uses an image from the current data record.
In the properties of the button it is required to define the option Close popup/tooltip. If the user clicks on the image, the tooltip window will be closed.
The Box-Shadow-Property
The box-shadow property comes from the CSS 3 standard. Unfortunately it is implemented differently by the common browsers. The parameters for the properties are identical though. The first parameter defines the horizontal alignment of the shadow to the right-hand side (positive value) or left-hand side (negative value). The second parameter defines the vertical alignment of the shadow – downwards (positive value) or upwards (negative value). The third parameter defines the width of the shadow in pixels. The fourth parameter is the initial color of the color gradient of the shadow. The color gradient always starts with the initial color and ends with complete transparency. Using the option inset as first parameter the shadow blends inwards.
box-shadow: inset 0 0 100px rgb(205,205,205);
-webkit-box-shadow: 0 0 100px rgb(205,205,205);
-moz-box-shadow: 0 0 100px rgb(205,205,205);
The box-shadow property is currently supported by Safari 3+, Firefox 3.1, Chrome and Opera 10.5. Internet Explorer before version 8 is not supporting this property.
