In this post I will explain how to get a dynamic help tooltip in your Mendix UI, without using a custom widget. The result will look like this:
The page displayed above (as rendered in the browser), looks like this while designing in the Mendix Business Modeler:
As you can see in the properties of the selected element, the blue (i) image in the browser is in fact a non-editable text area. Its content is filled by the attribute Description of the Country-object associated with the Location. This text area is not displayed as a regular text-box, because of the CSS-class ‘helptooltip’ that is set on it, in the ‘Class’-property (a property that all Mendix widgets have in common). In the HTML-page generated by the Mendix Business Server, the table row for country becomes:
|
1 2 3 4 5 6 7 8 9 |
<tr> <th>...</th> <th> <div class="mx-textarea mx-name-textArea1 helptooltip" id="mxui_widget_TextArea_1" data-mendix-id="51" focusindex="0" widgetid="mxui_widget_TextArea_1"> <label>The Netherlands is the main constituent country of the Kingdom of the Netherlands. It is a small, densely populated country, lying mainly in Western Europe, but also including three islands in the Caribbean. The European part of the Netherlands borders Germany to the east, Belgium to the south, and the North Sea to the northwest, sharing maritime borders with Belgium, the United Kingdom and Germany.[9] The three largest and most important cities in the Netherlands are Amsterdam, The Hague and Rotterdam. Amsterdam is the country's capital,[10] while The Hague holds the Dutch seat of government.[11] The port of Rotterdam is the largest port in Europe – as large as the next three largest combined.[12]</label> </div> </th> <td>...</td> </tr> |
I’ve used the custom class ´helptooltip´ to add some custom style rules to my theme’s CSS-file to the text-area transform into the tooltip. Check out the comments in the code below for explanation:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
div.helptooltip { height: 16px; width: 16px; margin-top: 8px; cursor: help; /* changes the mouse cursor while mouse-over */ background-image : url('/img/Administration$information.png'); /* show an image from the Administration module */ } div.helptooltip label { display:none; /* don't show the tooltip (label) while not :hover */ position:relative; /* position the tooltip relative to it parent div */ left:11px; top:11px; background-color: rgba(91, 192, 222, 0.7); /* blue background color with 70% opacity on the box */ padding: 3px; border: 1px solid gray; /* show a border around the box, you can remove it if you think it's ugly ;) */ border-radius: 5px; /* rounded corners on the box */ -webkit-box-shadow: 0px 3px 9px -2px #444; /* a nice shadow around the box */ box-shadow: 0px 3px 9px -2px #444; width: 600px; /* limits the width of the tooltip-box */ } div.helptooltip:hover label { display:block; /* show the label on :hover only! */ } .mx-window-content div { overflow: visible; /* needed to show the tooltip beyond the bounds of other container-divs */ } |
As a bonus, below is a little JavaScript to hide the tooltip buttons for which the “help text” is empty. You can put this code in your HTMLSnippet custom widget.
|
1 2 3 4 5 6 7 8 9 |
mx.addOnLoad(function(){ function hideEmptyHelpTexts() { $('.helptooltip').each(function(i, li) { if ($(li).html().trim()=='<label> </label>') //empty text will be rendered like this $(li).hide(); }); } setTimeout(hideEmptyHelpTexts, 1000); //delay 1 second: the data will be loaded in the widget by then }); |
If you know of a way to use an event instead of the 1 second delay, please let me know in the comments.