Item Renderer

For those components that have no child components e.g. Chosenbox, Selectbox, Cascader, Searchbox, their built-in renderers will directly wrap your data into an HTML snippet. Hence if your model data contains those characters that need to be escaped like < > &, you must escape them. You can call ZK's XMLs.escapeXML() or Strings.escapeJavaScript().

Implementing your own (ItemRenderer) can customize how a component renders data in a browser without javascript. (For the concepts about component, model, and renderer, please refer to the Model-driven Display section). Notice that ItemRenderer should return an HTML snippet that is different from ListitemRenderer that creates components.

Render an item with a tooltip

public class TooltipRenderer implements ItemRenderer {
    @Override
    public String render(Component owner, Object data, int index) throws Exception {
        return String.format("<span title=\"%s\" style=\"width: 100%%;display: inline-block;\">%s</span>", data, data);
    }
}

Usage

Assume we have a tree model (TreeModel) called district, and an instance of a custom renderer called districtRenderer, we can put them together in a ZUML document as follows:

<cascader model="${district}" itemRenderer="${districtRenderer}"/>

Specify FQCN at itemRenderer

<cascader model="${model}" itemRenderer="org.zkoss.reference.component.input.TooltipRenderer"/>