Adding custom tooltip to toolbar item

[Nicholas Wise]

Hello,

I'm attempting to add a custom tooltip to a custom toolbar item. I'm currently using the filemanager syncfusion component, and it's not clear in the documentation if this is possible. Using the following reference, it appears I can only read/write to the text, id, prefixicon, suffixicon, or width.

Reference: https://ej2.syncfusion.com/vue/documentation/toolbar/item-configuration/

Attached should be a screenshot of the code I'm attempting to run, with how I think I would need to approach the problem commented out. I have also included a screenshot of exactly the component I would like to change in the file manager.

Attachment: Syncfusion_SS_a96bf1cc.zip

[Sivakumar ShunmugaSundaram]

Hi Nicholas,

Greetings from Syncfusion support.

We have validated your reported query in the Vue FileManager component. By default, the FileManager Toolbar has a title attribute, and whenever you hover over the toolbar items, they show a title as a tooltip. This is the default behavior of the component. We would like to confirm whether this is your exact use case. We have attached the sample for your reference.

Sample: https://codesandbox.io/s/vue-filemanager-pane-forked-m6rsnb?file=/src/App.vue

Please check the attached sample. If we misunderstand your exact scenario, please share some details about the exact use case. Do you want to show customized Tooltip over Toolbar items? These details would help us to provide a prompt solution.

Regards,

Sivakumar S

[Nicholas Wise]

Sivakumar,

The last suggestion is correct. I would like to edit that title attribute to show a customized Tooltip when I hover over my custom Toolbar item.

[Sivakumar ShunmugaSundaram]

Hi Nicholas,

We have validated your reported query in the Vue FileManager component. As per your requirement, we have prepared a simple sample to add a custom item in Toolbar and customized the Tooltip of the created Toolbar item using the FileManager toolbarCreate event. You can use the tooltipText property to modify the Tooltip content.

Refer to the below code snippet.

[App.vue],

 

<ejs-filemanager

ref="file_instance"

id="overview_filemanager"

:ajaxSettings="ajaxSettings"

:view="view"

:toolbarSettings="toolbarSettings"

:toolbarClick="toolbarClick"

:toolbarCreate="toolbarCreate"

> 

</ejs-filemanager>

<script>

toolbarCreate: function (args) {

    debugger;

    for (var i = 0; i < args.items.length; i++) {

      if (

        args.items[i].id ===

        this.$refs.file_instance.$el.id + "_tb_custom"

      ) {

        args.items[i].prefixIcon = "e-icons e-fe-tick";

        args.items[i].tooltipText = "Custom Operation";

      }

    }

  },

</script>

 

In a similar way, you can modify the Tooltip content for all the Toolbar items. We have attached the sample for your reference.

Sample: https://codesandbox.io/s/vue-filemanager-pane-forked-8gtutf

Documentation: https://ej2.syncfusion.com/vue/documentation/file-manager/how-to/adding-custom-item-to-toolbar/

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Sivakumar S