Need a special offer?Find out if your project fits.

How to add tooltips for toolbar buttons?

uchivoitachi asked on October 14, 2021

Hi Dear Team,
Is there a way to add tooltips for the buttons of toolbar(please see the attached screenshot)?
Use case is that we want to remove the label of buttons(e.g. Save/Export) and leave button icon on the toolbar,but when mouse-over on the button, it will prompt out the customized tooltips which preset.
I tried the localization as below but not work(it seems the tooltips of toolbar only supports certain buttons):

localization: {
            toolbar: {
                connect: "Connect",
                connect_elastic: "To Elasticsearch",
                save: "wss",
                tooltips: {
                    connect_elastic: "hahahahwss",

From the document it says that there're only a few items support adding a tooltip:

"tooltips": {
            "add_condition": "Add condition",
            "condition": "Condition",
            "cp_text_color": "Text color",
            "font": "Font",
            "font_size": "Font size",
            "remove_condition": "Remove condition"

So there is a way to achieve this? thanks a lot!

2 answers

Illia Yatsyshyn Illia Yatsyshyn Flexmonster October 14, 2021

Thank you for your question.
Flexmonster does not natively support tooltips for toolbar tabs. However, the Toolbar is an open-source addition to Flexmonster, therefore, it can be customized on a really low level to match your needs.
We have prepared an example demonstrating how you can replace titles with tooltips: The idea is to overwrite the function responsible for creating tabs and complement it with desired functionality. All the changed parts of the original function are explained with comments. Please use the beforetoolbarcreated event to apply desired changed before the Toolbar is created.
We have also added some custom CSS rules to align tabs' icons after removing the title.
Please let us know if it works well for you.
Kind regards,

uchivoitachi October 18, 2021

Thanks for the sample workaround and we've tried it, it did work!
And, svg icon can also display tooltips well via adding <title></title> and <g id=""> in it.
<svg width=\"35\" height=\"35\" viewBox=\"0 0 24 24\" xmlns=\"\">" +
"<title>Tooltip</title>" +
"<g id=\"Icon/tooltip\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">" +
"<path d=\"path string..\" id=\"Fill-1\" fill=\"#002E6D\"></path>" +
"</g>" +

Please login or Register to Submit Answer