I also like your add-on, thanks a lot for your efforts!
I have one issue: my tooltip on an icon within a grid is cut off if I set interactive to “true”. So the tooltip is within the small sized grid only. I found a solution in the FAQs: FAQ | Tippy.js which proposes to append the element outside of the clipping container context (appendTo: document.body). But I cannot find a method like “appendTo()”. Another solution would be to set the popperOption “strategy” to “fixed”, but I also find no possibility to do this. I tried a lot of the configuration possibilities and also was playing around with the CSS, but nothing helped.
Are you planning to implement theses options or do you have any other ideas or suggestions?
I’m using Vaadin 20.0.6 and the latest version of your add-on (2.1.2).
Tanja Marschall:
I have one issue: my tooltip on an icon within a grid is cut off if I set interactive to “true”. So the tooltip is within the small sized grid only. I found a solution in the FAQs: https://atomiks.github.io/tippyjs/v6/faq/ which proposes to append the element outside of the clipping container context (appendTo: document.body). But I cannot find a method like “appendTo()”. Another solution would be to set the popperOption “strategy” to “fixed”, but I also find no possibility to do this. I tried a lot of the configuration possibilities and also was playing around with the CSS, but nothing helped.
I added the functionality to apply popperOptions to a TooltipConfiguration in version 2.2.0.
TooltipConfiguration tc = new TooltipConfiguration("testing");
// your use case
tc.addPopperOption("strategy", "fixed");
// more complex configs
tc.addPopperOption(
"modifiers",
new PopperOptionsModifier[]{
new PopperOptionsModifier(
"offset",
mapOf(
"offset",
new Integer[]{
10,
20
})),
new PopperOptionsModifier(
"flip",
mapOf(
"fallbackPlacements",
new String[]{
"bottom",
"right"
})),
new PopperOptionsModifier(
"preventOverflow",
mapOf(
"altAxis",
true,
"tether",
false
)
)
}
);
Tooltips.getCurrent().setTooltip(yourComponent, tc);