1. Home
  2. Forum
  3. jQuery
  4. ejGroupbutton tooltip

ejGroupbutton tooltip

How can I have a different tooltip for each button inside a groupbutton? In the documentation I have seen how to put a tooltip to the entire groupbutton, but not different to each button in the group.

Thanks.

11 Replies
CI Christopher Issac Sunder K Syncfusion Team October 10, 2018 05:28 PM UTC

Hi Oscar, 

Thank you for contacting Syncfusion support.  

We have prepared a sample as per your requirement. Each button will show different tooltip content now. For more details, please refer the following sample, 

Please let us know if you have any concerns. 

Thanks,
Christo

OB oscar bartolome October 11, 2018 06:04 AM UTC

Ok, thanks. And could you please provide the template for the default ones in groupbuttons? Like this:


Thanks.

CI Christopher Issac Sunder K Syncfusion Team October 11, 2018 07:09 AM UTC

Hi Oscar, 

Thanks for the update. 

You can change the theme to material to achieve the same look and feel of the tooltip. In the below sample, the CDN link for theme has been changed to material theme, 

<link rel='nofollow' href="//cdn.syncfusion.com/16.3.0.17/js/web/material/ej.web.all.min.css" rel="stylesheet" /> 


Likewise, you can design the tooltip as per your needs. Please let us know if this is not helping you. 

Thanks, 
Christo 


OB oscar bartolome November 23, 2018 12:22 PM UTC

Hi,

could you provide an example for a buttonGroup (with different tooltip for each button) inside an ejGantt toolbar, please?

Thanks

JA Jesus Arockia Sankaran S Syncfusion Team November 26, 2018 11:37 AM UTC

 
We have created a sample with ejButton groups on the Gantt custom toolbar template support, and each button will show different tooltip content now.  
 
 
Please let us know, if you require further assistance on this 
 
Regards, 
Jesus Arockia Sankaran S 


OB oscar bartolome November 29, 2018 01:34 PM UTC

Hi,

in the example provided, the contentType of the buttons in the groupbuttons of the toolbar is: "textonly". My buttons are "imageonly" type and using this type, the tooltip text is empty. 

My code:

dataSource: [
{ text: "WcView", contentType: "imageonly", prefixIcon: "material-icons WcView", htmlAttribute: { class: "small-button"} },
{ text: "OpView", contentType: "imageonly", prefixIcon: "material-icons OpView", htmlAttribute: { class: "small-button" } },
{ text: "Op2View", contentType: "imageonly", prefixIcon: "material-icons Op2View", htmlAttribute: { class: "small-button" } }
],

'Text' property doesn't seem to work with this content type. Any idea how to do this with 'imageonly' contentType?

Thanks

JA Jesus Arockia Sankaran S Syncfusion Team November 30, 2018 12:56 PM UTC

Hi Oscar, 
 
We recommend you specify the contentType of Groupbutton as “TextAndImage” and add “e-icon” class to render the image with text properly. Setting contentType as “imageonly” will only display the image in Groupbutton, not the text on the tooltip. 
 
 
We have set “contentType” as “TextAndImage” and hidden the text on the Groupbutton in this sample.  
 
Please get back to us if you require any further assistance on this.  
 
Regards, 
Jesus Arockia Sankaran S 


OB oscar bartolome December 3, 2018 11:13 AM UTC

Hi,

this works fine with one button group in the toolbar, but it has a weird behaviour with multiple button groups.
Could you please provide an example with more than one button group in the toolbar?

Thanks

JA Jesus Arockia Sankaran S Syncfusion Team December 4, 2018 09:32 AM UTC

Hi Oscar, 
 
As per your requirement, we have rendered the multiple button groups on the Gantt toolbar. 
 

Please get back to us if require any further assistance. 
 
Regards, 
Jesus Arockia Sankaran S 


OB oscar bartolome December 4, 2018 02:43 PM UTC

Hi,

thanks, that works fine. 

Another question, is there any way to give the tooltip a showing delay? I want the tooltip to appear only if I stare more than a second hovering the button. Is this possible? I've seen that mat-tooltip has a "showDelay" property, but I haven't seen it for ej.Tooltip.

Thanks.

PE Punniyamoorthi Elangovan Syncfusion Team December 5, 2018 01:14 PM UTC

Hi Oscar, 
Thank you for your update. 
As per your requirement we have increased the time delay for tooltip rendering with some work around solution. Please refer the below code example for this 
<script> 
        var clearTime; 
        function onHover(args) { 
            args.cancel = true; 
            var proxy = this; 
            clearTimeout(clearTime); 
            clearTime = setTimeout(function () { 
                args.model.content = args.event.target.textContent.trim(); 
                var a = $(args.event.target.parentElement).find("li").index(args.event.target) 
                var b = $(".myClass").eq(a).find('.e-tipcontent')[0].innerHTML = (args.event.target.textContent.trim()); 
                console.log($(".myClass").eq(a).find('.e-tipcontent')[0]) 
                proxy._hideTooltip(); 
                proxy._showTooltip(); 
            },500) 
        } 
</script> 
We have prepared the sample for your reference, please find the sample link below 
Regards, 
Punniyamoorthi 


Loader.
Up arrow icon