DevExtreme jQuery dxTreeMap - How to Set the Maximum Width of the Tile Tooltip Box in DevExtreme jQuery dxTreeMap

Mitovia Camp

created 2 days ago

Hello,

We are using the DevExtreme Treemap in our application and have implemented a custom tooltip for the tiles using the following code.

JavaScript
tooltip: {
                                    enabled: true,
                                    customizeTooltip: function (arg) {
                                        data = arg.node.data,
                                        result = null;
                                        result = "<span class='city'>" + data.tooltip + "</span>";
                                        return {
                                            text: result
                                        };
                                    }
                                }

We would like to set a maximum width for the tooltip. How can we achieve this?
Could you please provide a sample implementation?
Thanks.

Answers approved by DevExpress Support

Charles Vincent Cordial (DevExpress Support)

created 2 days ago

Hello,

You can use the TreeMap.tooltip.onContentTemplate to render a div element that has a custom ID. Then, use the ID to add the following CSS style:

JavaScript
#customId {
  min-width: 50px;
  max-width: 250px;
  word-wrap: "break-word";
  white-space: "normal";
}

Here is a code sample that implements this: Codepen.

Let me know if this helps.

Regards,
Charles

Comments (1)

Mitovia Camp a day ago

Hello,

Thank you for your response.

We are using the below code and css to set the custom tooltip and also our custom tooltip contains the html tags and we want to render them in the tooltip.

TypeScript
contentTemplate(arg) {
    data = arg.node.data;
    return $("<div id='customHeatmapToolTipId'>").html("<span>"+data.tooltip+"</span>");
}

CSS
#customHeatmapToolTipId {
    min-width: 50px;
    max-width: 250px;
    width: 50px;
    word-wrap: break-word;
    white-space: normal;
}

After trying the above code, custom tooltip is working but it is not considering the min-width and max-width which are set in CSS. Why?

It is showing same width of tooltip whether content is small or large.

Can you please provide your answer for this with reference link?

Thanks.

DevExtreme jQuery dxTreeMap - How to Set the Maximum Width of the Tile Tooltip Box in DevExtreme jQuery dxTreeMap

Answers approved by DevExpress Support

Recently viewed tickets