add tooltips to blocks

[bjarthur]

supersedes #4380

adds tooltips to Textboxes which appear on hover. API is a new tooltip!(::Block) method as proposed by @jkrumbiegel in #4380 (comment)

those blocks which do not already have a hovering field will need to be modified to have one.

currently only Textbox is known to work. will get to the others shortly.

using GLMakie
f = Figure()
tb = Textbox(f[1,1])
tt = tooltip!(tb, "below", placement=:below)

Type of change

Delete options that do not apply:

• New feature (non-breaking change which adds functionality)

Checklist

• Added an entry in CHANGELOG.md (for new features and breaking changes)
• Added or changed relevant sections in the documentation
• Added unit tests for new algorithms, conversion methods, etc.
• Added reference image tests for new plotting functions, recipes, visual options, etc.

[jkrumbiegel]

I don't think it's necessary to add hovering fields to all blocks. Maybe the way this function works could be that it grabs the bbox of the block passed to it (that's an internal accessible via the layout observables already) and then just adds logic that checks if the mouse is somewhere in there, but also that it has stayed at some point for at least t seconds. I think that's the normal behavior for these tooltips, that they appear after the user has wondered for a short while what that element might be for.

[bjarthur]

ready for review!

the tests only fail because i modified the tooltip reference image to include a centered tooltip for an axis. the image just needs to be updated

[bjarthur]

hovering fields have been removed from all blocks and mouseposition is compared to bbox as @jkrumbiegel suggested. tooltips can now be always shown, never shown, or only shown when hovered. i don't know how best to add a delay when hovering, and since this is a feature i wouldn't use, i chose not to pursue it. if this is important, please suggest a way and i can add.

[bjarthur]

here's how i use this PR:

Screen.Recording.2024-10-28.at.11.46.02.AM.mov

using GLMakie

fig = Figure()

to_doc = Toggle(fig[1,1])
tooltip!(to_doc, "show the tooltip docs", visible = :hover)

tb = Textbox(fig[2,1], stored_string = "textbox")
tooltip!(tb, "i'm a textbox",
         placement = :right,
         visible = @lift $(to_doc.active) ? :hover : :never)

me = Menu(fig[3,1], options = ["option 1","option 2","option 3"])
tooltip!(me, "i'm a menu",
         placement = :right,
         visible = @lift $(to_doc.active) ? :hover : :never)

bu = Button(fig[4,1])
tooltip!(bu, "i'm a button", label = "push me",
         placement = :right,
         visible = @lift $(to_doc.active) ? :hover : :never)

in actual usage, i also save the state of the toggle using Preferences.jl. when the user loads the package for the first time ever, the state is on and all tooltips are displayed on hover. if they then turn it off, this is remembered the next time and all subsequent times they load the package.

like this with GLMakie:

show_docs = @load_preference("show_docs", true)

to_doc = Toggle(fig[1,1], active=show_docs)

on(to_doc.active) do to_doc
    @set_preferences!("show_docs"=>to_doc)
end      

and this with Bonito:

c = filter(x->x.name=="show_docs", Bonito.HTTP.cookies(request))
show_docs = isempty(c) || c[1].value=="true"

to_doc = Toggle(fig[1,1], active=show_docs)

on(to_doc.active) do to_doc
    evaljs(session, js"document.cookie = \"show_docs=\"+$(widgets.to_doc.active).value;")            
end

[jkrumbiegel]

@ffreyer in the video above you can see the rendering weirdness with tooltip I was talking about before. The stroke of the little triangle is halved and jagged for some reason

@bjarthur I like this implementation better already. I think it still needs a delay setting (which you of course can set to 0 if you prefer that) but it would get out of your way more if you didn't have to toggle it on and off, but could leave it on and tooltips would display smartly.

I'm also not quite sure if it's good to show the tooltip on the outside of the block, that can work ok for smaller ones but for bigger ones it might look a bit awkward, and also drags attention away from the user's cursor (which is where they're currently attending). So I'd probably mirror the more typical behavior in browsers where the tooltip appears right next to the cursor. Like this:

Screen.Recording.2024-10-30.at.10.12.10.mov

[bjarthur]

delay to display and following the cursor now implemented in most recent two commits. anything else?

[bjarthur]

delay really slows down GUI. need to refactor to minimize calls to time(). hang tight...

[ffreyer]

@ffreyer in the video above you can see the rendering weirdness with tooltip I was talking about before. The stroke of the little triangle is halved and jagged for some reason

Yea and this is what I thought I fixed. And for me it is fixed in GLMakie, WGLMakie:

[EdsterG]

WGLMakie tooltips used to render correctly for me back in v0.21.8, and then broke a with one of the updates. I just pulled in the latest version v0.21.15 and the triangle is still wrong in WGLMakie. Pushed a fix that works for me #4560, but I think it’s more of a hack than an actual fix.

[EdsterG]

@ffreyer do you recall the commit in which you fixed the tooltip triangle? I wonder if that fix was OS specific for whatever reason.