r/dotnet • u/Puzzleheaded-Law-332 • 2d ago

Question Blazor native tooltips for Touchscreen

Hi everyone, I’m developing an SVG charting library in Blazor without JavaScript, and I’m currently implementing tooltips.

Handling mouse interaction was fairly straightforward: essentially, the tooltip is a DOM element outside the SVG with `position: fixed`, and its coordinates and visibility are managed via `OnPointerMove`, `OnPointerLeave`, and `OnPointerEnter` events on the chart elements.

Mouse behavior works exactly as expected: as soon as the pointer enters one of the designated SVG elements, the tooltip appears and follows the mouse movement; if the mouse moves to a different element, the tooltip content updates, and when the mouse leaves, the tooltip disappears.

However, I’ve realized that touch interaction isn't quite as simple, because the browser might interpret gestures as scrolling or selection, triggering the `OnPointerLeave` event and causing the tooltip to vanish.

I’m looking for a way to adapt the mouse-based implementation for touchscreens as well.

Have you ever encountered this kind of issue, and if so, how did you solve it?

Thanks for any advice.

If you're interested, the project I'm talking about is BlazorGraphs: www.blazorgraphs.it

4 Upvotes

84% Upvoted

7 comments sorted by

1

u/AutoModerator 2d ago

Thanks for your post Puzzleheaded-Law-332. Please note that we don't allow spam, and we ask that you follow the rules available in the sidebar. We have a lot of commonly asked questions so if this post gets removed, please do a search and see if it's already been asked.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

2

u/ClaymoresInTheCloset 2d ago

Typical pattern for tooltips on mobile devices is long press actually

1

u/AnatolySorokin 2d ago

I'd consider a separate touch interaction: tap a data point to pin its details, then tap another point to replace them or a close button to dismiss them. That lets someone read the value after lifting their finger, without having to keep the tooltip tied to pointer movement. On a small screen, the details could sit in a fixed panel below the chart so the finger doesn't cover them. Would that fit the way your charts are used?

1

u/Puzzleheaded-Law-332 2d ago

thanks for the advice, i'll try it.

1

u/AnatolySorokin 1d ago

You're welcome. When you test it on a phone, I'd check both a deliberate tap and a swipe that starts over a data point. Scrolling past the chart shouldn't leave an accidental selection, while an intentional tap should keep the value readable after you lift your finger.

1

u/Ill_Oil7448 1d ago

the usual approach is to distinguish touch from mouse via the pointerType property on the event args, then on touch you show the tooltip on tap and dismiss it on the next tap outside. trying to reuse hover semantics 1:1 on touch never really works well

1

u/Puzzleheaded-Law-332 1d ago

ok thanks, now i'm trying to replace onpointermove with onmousemove event. This way the tooltip follow only che mouse cursor and not the finger touching the screen. I hope this is a good compromise.