Edit button on a span element

I saw an application which is showing an edit button when you hover on it like this
image
How to achieve the same in vaadin?

Element API gives your option to listen mouse over on element

span.getElement().addEventListener("mouseover", event -> button.setVisible(true));

But just noting here, the UX design you are planning to have is very bad for mobile / touch screen users.

Maybe a better option is to set the button into suffix slot of the field and apply custom styles to make it less visible. When hovering or focusing the field it could become fully visible.

Button editBtn = new Button(VaadinIcon.PENCIL.create());
editBtn.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);

TextField editableField = new TextField("Active");
editableField.addClassName("editable-field");
editableField.setSuffixComponent(editBtn);
.editable-field vaadin-button[slot="suffix"] {
  opacity: 0.5;
}

.editable-field:focus-within vaadin-button[slot="suffix"],
.editable-field:hover vaadin-button[slot="suffix"] {
  opacity: 1;
}
1 Like

Also note that a server-side event listener means that there’s a delay from a network request before the button can be shown. It won’t be very noticeable when you develop locally with around 1 ms network latency but it’s likely to be quite noticeable in production.

Reaction to mouse movement is the type of interaction that needs to be more or less instant for users to not be confused. Already a delay of 100 ms can give the impression that there’s something wrong in in cases like this.

1 Like

Thanks for the solution and feedback. Mobile first is my priority so I will take this lighter.

Remember to use editBtn.setAriaLabel and editBtn.setTooltipText. ;)