We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get captions and tooltips on Symbol Palette items?

Thread ID:





144235 Apr 25,2019 11:14 PM UTC Apr 29,2019 06:40 AM UTC ASP.NET Web Forms 3
Tags: Diagram
David van Laar Veth
Asked On April 25, 2019 11:14 PM UTC

Hi, I am trying to add captions and tooltips to my symbol palette items. How do I do this?

Original                               =>       What I want

Ramya Thirugnanam [Syncfusion]
Replied On April 26, 2019 06:04 AM UTC

Hi David,  
Add caption to symbol palette items  
·        Please use symbol palette’s ShowPaletteItemText Property to show/hide the text below the palette shapes.  
·        By default, when you enable showPaletteItemText property, a node name will be rendered as a palette item text. 
·        If you need a text to be displayed with space or something, then you should use paletteItem label property to achieve your requirement because node name should not contain space or start with numeric values. 
Code example:  
symbolpalette.ShowPaletteItemText = true;  
BasicShape node = new BasicShape();            node.Name = name;  
node.PaletteItem.Label = “Rectangle Node”;  
Add tooltip to symbol palette items.  
We have rendered a tooltip for symbol palette items in diagram create event. Please refer to the code example below.  
Code example:  
<ej:Diagram ClientIDMode="Static" ID="DiagramContent" OnClientCreate="diagramCreate" >  
     function diagramCreate() {  
     function setToolTip() {  
        var paletteItems;  
        paletteItems = $(".e-paletteItem");  
        for (m = 0; m < paletteItems.length; m++) {  
            var title = "";  
            var wWord = ((paletteItems[m].id).split("_")[0]);  
            if (wWord) {  
                if (wWord.split(/(?=[A-Z])/)[0])  
                    title += " " + wWord.split(/(?=[A-Z])/)[0];  
                if (wWord.split(/(?=[A-Z])/)[1])  
                    title += " " + wWord.split(/(?=[A-Z])/)[1];  
                if (wWord.split(/(?=[A-Z])/)[2])  
                    title += " " + wWord.split(/(?=[A-Z])/)[2];  
                if (wWord.split(/(?=[A-Z])/)[3])  
                    title += " " + wWord.split(/(?=[A-Z])/)[3];  
                if (wWord.split(/(?=[A-Z])/)[4])  
                    title += " " + wWord.split(/(?=[A-Z])/)[4];  
            paletteItems[m].setAttribute("title", title);  
Ramya T 

David van Laar Veth
Replied On April 29, 2019 01:19 AM UTC

Thanks Ramya,

I have implemented the caption, but now when I drag the shape, there is a label on the dragged shape, and it is the Name (BPMNTaskNode), not the PaletteItem.Label (Form).

How do I remove the label from the dragged items?

Ramya Thirugnanam [Syncfusion]
Replied On April 29, 2019 06:40 AM UTC

Hi David,  
Query: How do I remove the label from the dragged items  
Please use the below CSS code example to achieve your requirement.  
Code example:  
         .e-paletteItem.e-draggable.e-js.dragClone .e-text-container {  
Ramya T 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon