feat: anchor tooltips above seekbar with styled pill box by Keith94 · Pull Request #606 · Samillion/ModernZ

Keith94 · 2026-03-30T01:53:44Z

Changes:

Button and volumebar hover tooltips now appear at a consistent position
Extend pill box to volumebar and button tooltips
Increase horizontal padding back to 5px
Remove redundant options

Changes: * Button and volumebar hover tooltips now appear at a consistent position * Extend pill box to volumebar and button tooltips * Increase horizontal padding back to 5px * Remove redundant options

Samillion · 2026-03-30T04:27:51Z

Terribly sorry about the late response, ended up spending the night at a friend's.

Excellent work. One issue, if you have osd-border-style=background-box in your mpv.conf, it'll definitely draw a secondary box inside the tooltip.

The unified function you made is great, but since it does two things, you need to reset to default state twice. (for each event)

For example:

-- draw a pill-shaped tooltip background box and label
local function draw_tooltip(ass, tx, ty, width, style, label, alpha)
    local fs = user_opts.tooltip_font_size
    local ph, pv = 5, 3
    -- draw tooltip box
    ass:new_event()
    ass:append("{\\rDefault\\alpha&H80&}")
    ass:pos(tx - width / 2 - ph, ty - fs - pv)
    ass:an(7)
    ass:append(osc_styles.tooltip_box)
    ass:draw_start()
    ass:round_rect_cw(0, 0, width + 2 * ph, fs + 2 * pv, (fs + 2 * pv) / 2)
    ass:draw_stop()
    -- add tooltip
    ass:new_event()
    ass:append("{\\rDefault}")
    ass:pos(tx, ty)
    ass:an(2)
    ass:append(style)
    if alpha then ass_append_alpha(ass, alpha, 0) end
    ass:append(label)
end

I'll be able to help better once I'm back home. Again, terribly sorry about the delay.

Keith94 · 2026-03-30T04:48:11Z

Ah, this is why I rely on your expertise lol. Glad you like it though.

Please investigate, make any changes you need or I can adjust that later. 🙏

Samillion · 2026-03-30T14:35:28Z

Looks great. I have a question, but keep in my mind these are questions, not suggestions.

Should the tooltips show above seek bar? In a way, they are unified, but does it look right?
Would making them show just above the button be a bad idea?
- We can adjust box transparency so that it would be clear to read, even if it's rendered on top of the seek bar
- For layering, we can lower seek bar to layer 49, so tooltips always render above it
  - Then we can layer title and chapter title at 48 so that thumbnail/time stamp seek tool tip always render above them

Keith94 · 2026-03-30T14:52:30Z

Would making them show just above the button be a bad idea?

I initially felt it looked too busy with tooltips and multiple elements on top of each other, especially with the new box effect.

Since we can now change osc height, I was going to suggest decrease the height to 62-63 for a more minimal look once the tooltips were out of the way. YouTube has a similar approach.

But let me know what you think.

Samillion · 2026-03-30T15:24:38Z

Since we can now change osc height, I was going to suggest decrease the height to 62-63 for a more minimal look once the tooltips were out of the way. YouTube has a similar approach.

This sounds very nice. Agreed.

nekoxuee · 2026-03-30T15:27:59Z

Since this is inspired by YouTube:
The area above YT progress bar is empty and the gap between the buttons and the progress bar is too tight, that is why they decided to place the tooltip above the progress bar.

Samillion · 2026-03-30T15:30:32Z

If we do decide OSC height to be 62 (or 60?), we should:

Fix layering so tooltips render above Title/Chapter
Adjust button tooltip transparency to not be so transparent, for readability.
- By default, should we disable title/chapter title above osc? Question, not a suggestion

Samillion · 2026-03-30T17:40:26Z

Sorry for the additional comment.

Right now, the seek bar tooltips (time/chapter/thumbnail) are drawn on-top of title/chapter title. So the behavior already exists, right? So having all tooltips show there, unified, wouldn't be a problem, right?

So it all goes to the questions from my previous comment

If we do decide OSC height to be 62 (or 60?), we should:

Fix layering so tooltips render above Title/Chapter

Adjust button tooltip transparency to not be so transparent, for readability.

By default, should we disable title/chapter title above osc? Question, not a suggestion

nekoxuee · 2026-03-30T17:47:19Z

I think the title and chapter is basic info and shouldn't be disabled by default.

Samillion · 2026-03-30T17:51:01Z

Alright. What about the other adjustments, good?

Or do you think button tooltips should not be above seek bar?

Samillion · 2026-03-30T17:59:41Z

Sorry, correction:

Fix layering so tooltips render ~~above~~ on top of Title/Chapter (like thumbnail)

nekoxuee · 2026-03-30T19:39:10Z

Or do you think button tooltips should not be above seek bar?

I don't really mind the tooltips being above the progress. I just pointed out the reason why YT does it this way is due to their constraints

Most of the time I don't really know what to say because many changes feel like opinions and there isn't a consistent rule to follow, plus I don't use modernz myself, so I don't really know what users expect or prefer. I usually just leave these kinds of decisions up to you, either way is fine.

Samillion · 2026-03-30T19:52:48Z

Transparency wise, what about: ~30%

ass:append("{\\rDefault\\alpha&H4D&}")

To help:

100%  - &HFF&  (invisible)
 90%  - &HE6&
 80%  - &HCC&
 70%  - &HB3&
 60%  - &H99&
 50%  - &H80&
 40%  - &H66&
 30%  - &H4D&
 20%  - &H33&
 10%  - &H1A&
  0%  - &H00&

Samillion · 2026-03-30T20:13:30Z

Changes:

Adjust layers so tooltips does not render behind title/chapter
- Change seek bar layer to 49 instead of 51
- Change title and chapter title layer to 48 instead of 50 (to render behind thumbnail)
Adjust tooltip box transparency to 40%

Keith94 · 2026-03-30T20:40:48Z

30% alpha is a lot easier to read especially when it's overlapping other text.

A height of 60 looks great as well.

Samillion · 2026-03-30T20:45:26Z

Changes:

Fix hitbox crash in image mode
Fix image mode tooltip offset
Adjust tooltip transparency to 30% instead of 40%

Samillion · 2026-03-30T20:56:15Z

Should we adjust default value of osc_height to 60? I honestly like it, but I'm not sure if it's personal preference or actually a good change.

Also, are we sure alpha 30% is not too opaque? or was 40% unreadable? This was 40%:

Keith94 · 2026-03-30T21:24:16Z

I can confirm when I'm home. I'll spend more time with it. Thanks for all the fixes btw

Samillion · 2026-03-30T22:17:05Z

I now see how 30% is better (what is currently used), definitely makes reading tooltip consistent, especially for old farts like me who might squint to read stuff. 😝

I didn't have problems with 40% though, so I'm fine with either one.

Keith94 · 2026-03-31T00:04:31Z

The seek tooltip appears to be anchored a little higher than button tooltips. It should probably come down to match.

Should we adjust default value of osc_height to 60? I honestly like it, but I'm not sure if it's personal preference or actually a good change.

I would also agree to set to 60; there's still a good amount of padding so nothing overlaps.

Samillion · 2026-03-31T00:16:19Z

Sounds good. Could you make the adjustments please? I'm currently preparing a locale change, if you don't mind and if it's not a bother.

Also default osc_height to 60.

Keith94 · 2026-03-31T00:43:21Z

No worries, I made the changes.

Samillion · 2026-03-31T00:58:02Z

Beautiful, thank you very much. Ready to merge? I've tested:

modern layout
modern-compact layout
modern-image layout (needs some fixing, but it's prepared already)
with and without thumbfast
with @Xurdejl's box hover

So far, everything is looking very noice.

Keith94 · 2026-03-31T01:01:45Z

Beautiful, thank you very much. Ready to merge?

Looks good to me! Great job all.

Samillion · 2026-03-31T01:05:34Z

Thank you very much for your effort.

Keith94 · 2026-03-31T01:08:20Z

You as well.

It's oddly satisfying seeing all the repetitive code nuked out of existence.

Samillion · 2026-03-31T04:03:02Z

It's oddly satisfying seeing all the repetitive code nuked out of existence.

Indeed. All thanks to the function you created, well done.

Side note: My god, updating all the previews was a pain in the ass lol.

I want a better main preview image, with a higher quality, but I can't be bothered after all that. 😝

Keith94 · 2026-03-31T04:56:07Z

Previews look very nice. Never even thought to set options through console like that.

Not sure what happened, but the volume slider tooltip is offset slightly lower. Weird.

Samillion · 2026-03-31T11:59:31Z

Not sure what happened, but the volume slider tooltip is offset slightly lower. Weird.

Ah, nice catch. It's the added + elem_geo.h / 2 in b50e299

Could be solved by setting an offset

-ty = ref_el.hitbox.y1 + elem_geo.h / 2 - user_opts.tooltip_height_offset - image_mode_offset
+local offset = (ref_el == element) and (elem_geo.h / 2) or 0
+ty = ref_el.hitbox.y1 + offset - user_opts.tooltip_height_offset - image_mode_offset

But I don't like using the name local offset, too common. point_offset? middle_offset? anchor_offset?

I dunno, I hate naming things lol.

Keith94 · 2026-04-01T00:28:02Z

That does indeed solve it. Do you want me to add that?

Samillion · 2026-04-01T00:29:45Z

That does indeed solve it. Do you want me to add that?

Yes please, that would be awesome. I'm working on optimizing loading external locales at the moment.

Keith94 · 2026-04-01T00:33:11Z

You are a machine.. lol

I'll try to combine it with another fix (hopefully I won't break anything else).

Samillion · 2026-04-01T00:36:24Z

You are a machine.. lol

😆 The code base is so close to actually reaching a clean and well optimized state. I cannot wait for that to happen, because it means less frequent updates and a stable behavior overall.

I'll try to combine it with another fix (hopefully I won't break anything else).

Thank you very much ❤️

feat: anchor tooltips above seekbar with styled pill box

0eaa3fb

Changes: * Button and volumebar hover tooltips now appear at a consistent position * Extend pill box to volumebar and button tooltips * Increase horizontal padding back to 5px * Remove redundant options

Samillion reviewed Mar 30, 2026

View reviewed changes

Comment thread modernz.lua

fix: prevent mpv drawing second box inside tooltip

386ad6b

Samillion mentioned this pull request Mar 30, 2026

feat: add semi transparent background hover effect #604

Merged

fix: adjust layers so tooltips does not render behind title/chapter

022dda5

fix: hitbox crash in image mode, and image mode tooltip offset

23acffc

fix: don't render tooltips behind time codes

d1eb0f1

refactor: use draw_tooltip() for all tooltips to avoid repetition

f367d68

fix: align seekbar tooltip vertical position with button tooltips

b50e299

Also default osc_height to 60.

Samillion merged commit 1504649 into Samillion:main Mar 31, 2026

Keith94 deleted the tooltip_wrap branch March 31, 2026 01:08

Uh oh!

Conversation

Keith94 commented Mar 30, 2026

Uh oh!

Samillion commented Mar 30, 2026

Uh oh!

Uh oh!

Keith94 commented Mar 30, 2026

Uh oh!

Samillion commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Keith94 commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Samillion commented Mar 30, 2026

Uh oh!

nekoxuee commented Mar 30, 2026

Uh oh!

Samillion commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Samillion commented Mar 30, 2026

Uh oh!

nekoxuee commented Mar 30, 2026

Uh oh!

Samillion commented Mar 30, 2026

Uh oh!

Samillion commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nekoxuee commented Mar 30, 2026

Uh oh!

Samillion commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Samillion commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Keith94 commented Mar 30, 2026

Uh oh!

Samillion commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Samillion commented Mar 30, 2026

Uh oh!

Keith94 commented Mar 30, 2026

Uh oh!

Samillion commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Keith94 commented Mar 31, 2026

Uh oh!

Samillion commented Mar 31, 2026

Uh oh!

Keith94 commented Mar 31, 2026

Uh oh!

Samillion commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Keith94 commented Mar 31, 2026

Uh oh!

Samillion commented Mar 31, 2026

Uh oh!

Keith94 commented Mar 31, 2026

Uh oh!

Samillion commented Mar 31, 2026

Uh oh!

Keith94 commented Mar 31, 2026

Uh oh!

Samillion commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Keith94 commented Apr 1, 2026

Uh oh!

Samillion commented Apr 1, 2026

Uh oh!

Keith94 commented Apr 1, 2026

Uh oh!

Samillion commented Apr 1, 2026

Samillion commented Mar 30, 2026 •

edited

Loading

Keith94 commented Mar 30, 2026 •

edited

Loading

Samillion commented Mar 30, 2026 •

edited

Loading

Samillion commented Mar 30, 2026 •

edited

Loading

Samillion commented Mar 30, 2026 •

edited

Loading

Samillion commented Mar 30, 2026 •

edited

Loading

Samillion commented Mar 30, 2026 •

edited

Loading

Samillion commented Mar 30, 2026 •

edited

Loading

Samillion commented Mar 31, 2026 •

edited

Loading

Samillion commented Mar 31, 2026 •

edited

Loading