Have widget appear in the place of another when hovered

[parmjotsinghrobot]

This is pretty complicated to explain. Here it goes.

I have a small media widget within my bar, which currently displays the title and artist(s) of the media that is currently playing.

I want to be able to hover over the media details, and have the text disappear. Easy enough. I then want some media controls to appear in the place where the text was.
I can't really figure out how to do this.

I've figured out how to get the media controls to appear when I hover over the text, but they appear to the right, and take up space even when not visible.

Can someone help me with this?

Edit: here is what I have so far. I have managed to get the widgets to disappear and appear, but they still appear next to each other, not overlapping each other.

(defvar media-hover false)
(defwidget media-player []
  (eventbox
    :onhover "eww update media-hover=true"
    :onhoverlost "eww update media-hover=false"
    (box
      :class "media-player"
      :space-evenly false
      (revealer
        :reveal { media-hover == false }
        ; label with track title)
      (revealer
        :reveal { media-hover == true }
        (box
          :class "media-controls"
          :space-evenly false
          ; playerctl media buttons)))))

[viandoxdev]

You probably want to use a (maybe two) revealer for that. They're a bit finicky (tend to break for absurd reasons, see #196) but should get the work done here. For a crossfade you could use overlays too.

[parmjotsinghrobot]

I did not see your edit, I would have marked this as answer if I had.

[oldwomanjosiah]

I did this in my config here if you want a full reference.

The basic gist is that you want

; Some defined state for expanding and retracting
(defvar expanded `false`)

(defwidget SomeWidget

  ; Something to collect the state updates
  ; By wrapping the other content, you make sure that it stays expanded while
  ; working with the revealed content.
  (eventbox
    :onhover `${EWW_EXECUTABLE} update expanded=true`
    :onhoverlost `${EWW_EXECUTABLE} update expanded=false`

    ; Something to be visible while hovered
    (revealer
      :reveal { expanded == true }
      (HoverContent))

    ; Something to be visible while not hovered
    (revealer
      :reveal { expanded == false }
      (UnHoveredContent)))

The biggest issue I've run into comes from the fact that onhover and onhoverlost aren't always called. They are like 99.9% of the time, but I've had it get stuck open before. You just have to hover and un-hover it again in that case.

[parmjotsinghrobot]

I managed to figure that out on my own, but I didn't realise I could optimise it by using one variable instead of two. I just can't manage to get both widgets in the same spot, overlapping each other.

I'll see if your config has something that can fix this.

Edit: I can't seem to find anything, and I don't think CSS could be used to fix this, since all the properties I've tried using (float, display, position), aren't valid.

[viandoxdev]

Have you tried the overlay widget ? The css used in ew is a subset of web css called GTK css that doesn't support many of the normal properties (i.e positioning). Though you shouldn't need it if using sliding animations

[parmjotsinghrobot]

I did not notice that in the reference. I'll try it out!

[parmjotsinghrobot]

Thanks to @oldwomanjosiah and @viandoxdev, I have managed to get it working the way I want it to.
Here is a minimal example:

(defvar media-hover false)
(defwidget media-player []
  (eventbox
    :onhover "eww update media-hover=true"
    :onhoverlost "eww update media-hover=false"
    (overlay
      :class "media-player"
      :space-evenly false
      (revealer
        :reveal { media-hover == false }
        ; label with track title
      )
      (centerbox
        (box) ; this is to center the controls
        (revealer
          :reveal { media-hover == true }
          (box
            :class "media-controls"
            :space-evenly false
            ; playerctl media buttons)
        (box)))))); this is to center the controls

Key items I used to figure this out:

• Use eventbox hover events to activate and deactivate revealers, so that the required widget is active when hovered.
• Use the overlay object so that both objects are on top of each other

If someone can center the controls with something other than a centerbox and two empty boxes, please send it here.