1

When displaying data in a fancytree tree structure I want long strings to be displayed as follows. The first 24 characters should be shown and then an ellipsis like ("apple ... ") and on hover it should show the complete string in a tool tip.

Is there a efficient way of constructing our desired UI elements? I have a json data in the proper structure that I need to construct the fancytree.

jwg
  • 5,547
  • 3
  • 43
  • 57
keshab kumar
  • 11
  • 4

1 Answers1

1

You can use CSS to truncate long text with ellipses, but this is based on the width of the tree title in pixels, not characters. The CSS below demonstrates how to truncate long titles over 75 pixels in length:

span.fancytree-title {
    width: 75px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

To show the full title of Fancytree node in a tooltip, you can set the tooltip option of the NodeData object like so:

{
    title: "Node Long title 1",
    tooltip: "Node Long title 1"
}

A full example showing the CSS and tooltip together can be found in this JSFiddle.

mechenbier
  • 3,037
  • 23
  • 31