Tooltip

Tooltip is a component that can be used in conjunction with any component to display contextual information.

View larger

Close

View larger

Close

Usage

Tooltip is a component that can be used in conjunction with any component to display contextual information. When the attached component is hovered, the tooltip displays the contextual information.

Client-side implementation

This is the server-side (Java) API for Vaadin Platform for the vcf-tooltip component. Looking for the client-side version? It can be found here: https://vaadin.com/directory/component/vaadin-component-factoryvcf-tooltip

Sponsored development

Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: Support and Pricing

Sample code

Button button = new Button("Click me");
Tooltip tooltip = new Tooltip();

tooltip.attachToComponent(button);

tooltip.setPosition(TooltipPosition.RIGHT);
tooltip.setAlignment(TooltipAlignment.LEFT);

tooltip.add(new H5("Hello"));
tooltip.add(new Paragraph("This is an example of how to use it"));
// Tooltip should be added to layout as well 
add(button, tooltip);

Button open = new Button("Open tooltip", event -> {
    tooltip.open();
});

Button close = new Button("Close tooltip", event -> {
    tooltip.close();
});

button.addClickListener(event -> {
   tooltip.setEnabled(!tooltip.isEnabled());
});
// Tooltip should be added to layout as well 
add(open, close, button, tooltip);

Links

• Online Demo
• View on GitHub
• Edit

Compatibility