Action on hover especially when dragging?

#1

Folks,

I am exploring the possibility of using action on hover on a button or tab. At a minimum would it be possible to cause the equivalent of a click after hovering on a button or tab for a period of time?.

An example may be if we had a tab, or set of tabs with a set of drop zones, one could drag something over a sidebar tab and wait, that sidebar tab opens, hover over another [sub] tab wait and that opens then drop the payload.

I don’t see how this may be possible in tiddlywiki, nor am I well versed in hover in html or CSS either. Currently the hover response is the tooltip, and I am not sure if this would jeopardise that. One way may be to only do this if a payload is available to be dropped.

Thanks in advance

Open Tab on Hover
#2

@TW_Tones First realize that pointer events (like hover) only work with devices that support pointer events – IOW, mobile devices (like your phone) typically don’t support hover.

The specific example you gave using tabs (i.e. the tabs macro) would require a rewrite to support hover action (perhaps using $eventcatcher? but I’m sure mouseover etc does not “bubble”).

In general terms, you can certainly use css’s hover pseudo class to cause things to appear in TW, but it has to be said, it’s a less than satisfactory outcome, the code being quite convoluted for someone not well versed in CSS chicanery.

This is a TW popup that appears on hover:

image

Truth be told, I’d put it back to work as a button click if I had the time.
.

1 Like
#3

Thanks @CodaCoder

So you are saying “that is where dragons dwell”.

Perhaps there is another way to do the equivalent? rather than tabs.

That empowering a hierarchical list that mouse over can open elements to expose a drop area? Perhaps CSS display?

Otherwise I will just display one or more drop zones before I initiate the drag.

It would have being nice to find something in one browser tab, select and drag it, we can highlight another browser tab, and it will open, then select a different dropzone and drop.

It related to this discussion What would be the best way to allow each tiddler, or part there of to be a custom drop zone? which I have all but completed.

#4

I might not be catching on but that’s sounding a bit like drag and drop reordering… as you hover it exposes drop zones right? Maybe reverse engineering how the open tab works would be informative if it’s along similar lines? It’s not necessarily action based on hover, but selective show and hide of dropzones… just thoughts.

2 Likes
#5

I am. But that may just be me – it’s difficult to keep all the parts in my head “later” when I need to maintain it.

Yes, I fully understood what you were trying to achieve. But again, you won’t find that outside of a desktop (WIMP) environment.

Yes, I read all that and I made a short reply to one of them.

Rewriting the tabs macro is certainly not beyond your capabilities, though I gather the CSS may present you with a challenge. In straightforward terms, you want a div element that’s set to display:none under normal circumstances, but set to display:block when hovered. For the tabs macro, that sounds quite a challenge (to me) – not even sure it fits with the current code. :confused:

Maybe the TW wizards will come calling soon and offer up an idea or two. My idea is to perhaps take advantage of the fact that each tab’s content is a tiddler (transcluded). Maybe it could be shown in a popup when you hover the tab button (but you’ll want to add a modifier like Ctrl or similar). But that’s as far as my thinking has taken me.

1 Like
#6

I just want this topic to be reviewed given the passing of time, and so far no working solution.

The ability to drag something from elsewhere and choose where to drop it (multiple destinations) using an “on hover” popup.

  • This would avoid the need to select the destination before dragging
  • One of these destinations could be the standard import process and another import with no interaction.

One possible work around; Can we do it?

Provide a on hover popup that then displays a set of different dropzones, if something “text/link or title is dropped on one of these” it will handle the drop according to the dropzone, eg add a tag, or add the title to a list etc…

  • Although I would like to drop it on a tab, rather than confuse the tab handling just finding a way to hover and select one of a number of dropzones gives us the key features we need for just in time selection of a dropzone.

Please note, I do a lot of drag and drop on Desktop, so if it just does not work on Mobile I am fine with that.

  • What I tend to do on mobile is copy and paste, so when on mobile if we could click to open an input box in which we can past the “text/link or title” and have this handled as if dropped is a useful pattern.