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

How to get captions and tooltips on Symbol Palette items?

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

Original                               =>       What I want

3 Replies

RT Ramya Thirugnanam Syncfusion Team 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 

DV David van Laar Veth 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?

RT Ramya Thirugnanam Syncfusion Team 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 

Live Chat Icon For mobile
Up arrow icon