Is it possible to trigger an action on mouse over or hover?

#1

Inspired by Tooltip positioning - #7 by TW_Tones ands a previously raised desire to allow dragging over a tab to open the tab, I was wondering if there is a way to enable an action on mouseover?

  • The action would need to be triggered only once to stop multiple triggers

That is I am looking for a way to trigger a tiddlywiki action on mouse over. The fact is this sounds already like responding to a drop zone.

ANy thoughts on this apparently missing ferature in tiddlywiki?

Open Tab on Hover
Open Tab on Hover
#2

I can’t find where it was originally hosted, but Andreas Hahn (of Tinka fame) has a bare-bones plugin you can pick up here. It adds a <$hover> widget that functions very much like <$button>, but sends messages on mouse-in and/or mouse-out.

I imagine you’re not really looking for a Javascript solution, but maybe it will inspire something… or perhaps it will be useful to someone else.

2 Likes
#3

Wow, Possibly just what was needed.

  • I note it will not trigger when dragging something over

This is great thanks @etardiff

#4

If mobile devices are involved and the action is important, hover might not work well.

If no mobile devices are involved, or the action is benign, then you have no worries.

#5

Thanks for the reminder, I am a “Desktop first kind of guy”, I love my 2xHD+ screens, but never the less, there are currently ways to do things with desktop and mobile, however less when on mobile. I am keen to make it a lot easier on Desktop without removing functionality on mobile, I may just not add the additional functions to mobile.

  • From experience I am more likely to copy/paste on mobile rather than drag, drop or mouse over anyway.

Thanks again

1 Like
#6

You can always combine an $eventcatcher with e.g. the mouseenter or mouseover event…

Open Tab on Hover
#7

@Yaisog this requires a JavaScript solution, yes?

Although your suggestion is somewhat helpful, I am always looking for native tiddlywiki solutions, if they don’t exist perhaps a plugin, but always with the view to reducing the gaps in tiddlywiki and ideally have them addressed in the core eventually.

@etardiff’s hover widget is an example, but there remain a few gaps.

I hope one day to allow tabs (effectively buttons) to contain custom dropzones such that you can drag content from somewhere, hover over a tab to open that tab, then drop on the tab contents to import.

  • Critically I would want the solution to be a macro/widget or what I call a WikiScript solution so every man, woman, child, cat and dog can use it :nerd_face:
About "WikiScript"; And MarkUp: Markdown is better or Wikitext is better
#8

Hi @TW_Tones, there is no JavaScript required: https://tiddlywiki.com/#EventCatcherWidget

#9

Thanks, I now see why, I am familiar with event catcher, but not the javascript events you named. I have used it only to capture tiddlywiki events. I belive they are not documented in tiddlywiki beyond the parameter event-type The type property of the JavaScript event.

  • I imagine they are too numerous to add to the documentation?
  • Could you give a simple example how to use them?

[Edfited] I imagin these are equivalenmt to mousein , mouseout in the aforementioned hover widget.

#10

Yes the hover widget is the solution to the OT, at least for tabs; thanks @etardiff Emily

Now mousing over any tab will change tabs :nerd_face:

  • Install the hover widget plugin, save and reload
  • edit $:/core/macros/tabs and wrap the top macro
  • Wrap contents of tabs-button macro in
<$hover set="$:/state/tab/sidebar--595412856" setTo=<<currentTab>> >

</$hover>
  • Note I established the state tiddler by changing tabs and seeing the above tiddler change and contain the currentTab.
  • We can just define a replacement macro for tabs-button

Package as of writing mouse-over-sidebar-tabs.json (8.5 KB)

  • [Edited] I just want to add if you have a lot of sidebar tabs, over three or more rows, using hover may prove difficult as you may be forced to cross other tabs after selecting one, thus selecting another. Best for smaller lists perhaps?

Still outstanding

I would like to see a way to do this while also dragging a payload so it can then dr4op it on a dropzone in the tab.

2 Likes
#11

Sorry, but mouseenter doesn’t bubble. The event won’t reach a parent ($eventcatcher) element.

Any event you want to target with $eventcatcher, must support bubbling.

image
image843×140 11.7 KB

#12

Hi @CodaCoder, you’re correct, of course.
I checked in an old revision where I had used it successfully, and it was the pointerover event that worked.

Open Tab on Hover