Tooltip sticked to target element
The showcase page for the tooltip component has a variant labeled "Interactive Tooltip." In this example, after opening the tooltip window, it remains in place as the user scrolls the page. Unfortunately, there's no option to view the code or the set parameters.
https://www.syncfusion.com/blazor-components/blazor-tooltip
On the demo page, if we set the IsSticky parameter, the tooltip looks similar to that one in the showcase, but unlike the latter, the tooltip window follows the page scroll and is not sticky to target button.
https://blazor.syncfusion.com/demos/tooltip/api
Then, if setting the IsSticky flag isn't enough, how can we replicate the behavior from the first example?
Hi Niko Bellic,
We understand that in the showcase example, the tooltip remains fixed in place even while scrolling, whereas simply setting the IsSticky property in the API demo causes the tooltip to move along with the page scroll.
To replicate the showcase behavior, we prepared a minimal sample where the tooltip is initialized with the IsSticky="true" property and positioned absolutely within the container. By applying custom CSS (position: absolute; left: calc(50% - 60px); top: 45%;), the tooltip is anchored to a fixed location on the page rather than following the target element during scroll. This ensures the tooltip remains visible and stationary, similar to the "Interactive Tooltip" variant in the demo showcase.
In summary:
- IsSticky keeps the tooltip open after interaction.
- Absolute positioning via CSS ensures the tooltip does not move with the target element during page scroll.
This combination achieves the same sticky, scroll-independent behavior demonstrated in the showcase page.
For your reference, we’ve also included a sample showing this in action along with a GIF demonstration:
Gif:
Regards,
K N Siddartha
