Skip to content

Instantly share code, notes, and snippets.

@TatuLund
Created May 28, 2023 15:50
Show Gist options
  • Select an option

  • Save TatuLund/fbe4490ce651f66041e18ca84ef9e0cc to your computer and use it in GitHub Desktop.

Select an option

Save TatuLund/fbe4490ce651f66041e18ca84ef9e0cc to your computer and use it in GitHub Desktop.
Vaadin Tooltip API does not have method to set the CSS class name of a specific tooltip-overlay-element, which could be needed for specific styling cases. This JavaScript call is a workaround.
package com.example.application.views;
import com.vaadin.flow.component.Component;
public class TooltipUtils {
public static void setTooltipClassName(Component comp, String className) {
comp.getElement().executeJs(
"""
if ($0.getElementsByTagName('vaadin-tooltip').length == 1) {
$0.getElementsByTagName('vaadin-tooltip')[0]._overlayElement.setAttribute('class',$1);
} else {
const tooltips = document.getElementsByTagName('vaadin-tooltip');
for (let i=0; i<tooltips.length; i++ ) {
const tooltip = tooltips[i];
if (tooltip._overlayElement.id === $0.getAttribute('aria-describedBy')) {
tooltip._overlayElement.setAttribute('class',$1)
}
}
}
""", comp.getElement(), className);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment