Show Tooltip on Combobox Caption if overflowing

0
Hey all,I want to show a tooltip for the caption of a multi selection combobox. Is there any setting for this or has anyone encountered this problem before?Below is an example of our overflowing caption:Thanks
asked
2 answers
0

As far as I know, there is no out-of-the-box setting in the standard Mendix Combo Box / multi-selection Combo Box to automatically show a tooltip only when the selected caption overflows.


So if you want this behavior, it would usually need a custom solution, for example:

  • adding a tooltip through custom JavaScript
  • extending/adjusting the widget
  • or using CSS/HTML attributes if your implementation allows it


I would recommend implementing this with custom JavaScript.


In practice, that is usually the most realistic option here. A pure CSS/HTML solution may not be enough because the multi-selection Combo Box is rendered by the widget, so you may not have direct control over the caption element. Extending or rebuilding the widget would also be much heavier than needed for a tooltip requirement.


A JavaScript-based approach lets you check whether the caption is actually overflowing and then set a title attribute only when needed. That makes it a good balance between effort and flexibility.


So my suggestion would be to:

  • target the rendered caption element after the widget is loaded
  • compare scrollWidth and clientWidth
  • if the text is truncated, add the tooltip dynamically


That would probably be the simplest practical solution here without going as far as custom widget development.


If this resolves your question, please mark it as accepted.


answered
0

Mendix does not provide a built-in option to show a tooltip for the caption of a Multi-Selection Combo Box when values overflow, so the only fully reliable solution is to add it manually using a small JavaScript enhancement. Assign a custom class (e.g., multi-tooltip) to your combo box, and then use a JavaScript action or HTML snippet to dynamically set the title attribute of the underlying input field to its current value (which contains the selected items). For example, use document.querySelectorAll('.multi-tooltip input').forEach(el => el.setAttribute('title', el.value));. This ensures that whenever users hover over the field, they will always see the complete list of selected values in a native browser tooltip, regardless of how many items are selected. This approach works 100% consistently across Mendix versions because it relies on standard DOM behavior rather than platform-specific settings

answered