CSS tooltips in Mendix

By 11 November 2014 Mendix No Comments

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:

helptooltipexample

The page displayed above (as rendered in the browser), looks like this while designing in the Mendix Business Modeler:

helptooltip_pagedesigner

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:

 

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:

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.

If you know of a way to use an event instead of the 1 second delay, please let me know in the comments.

Leave a Reply

Your email address will not be published.