Modifier keys and Tooltips using CSS

#1

Hi Folks,

I am working on a tool to extend the functionality of links. We can make use of the modifier keys such as shift, alt , ctrl and meta when processing the click action.

If however you first hold a modifier key you will see the tooltip value will not be displayed. It would be nice to be able to set a different tooltip for each modifier key. I think to add these as attributes to the button widget etc… would make the attributes too complex, but I believe there may be a way to use CSS to set the tooltip values based on the modifier keys.

Can any one suggest “How to” or the CSS method to use, perhaps in a class.

Thanks in advance

#2

mouseover is a bubbling event. $eventcatcher handles bubbling events and provides a modifier attribute to tell you which modifier key was held down during the event.

However, I don’t see how to change an HTML title attribute (where widget tooltips end up) using CSS.

That said, I’m increasingly blown away by some of the CSS gimmickry I see posted on the web - might be possible for a true CSS guru.

#3

What about this idea…

Three different buttons, each with a unique tooltip.

Mouseover something

Mouseover + Ctrl == reveal button 1
Mouseover + Alt == reveal button 2
Mouseover + Shift == reveal button 3

Worth trying, I think.

#4

CTRL-clicking a link is already used by the core. … Opens a tiddler, without changing the story-river scroll position

1 Like
#5

I think that is shift clicking.

Currently I have designed this on my linker tool.

  • Normal open and scroll (default)
  • Shift click open below (default)
  • ctrl-click open edit target?
  • alt-click copy tiddlername to clipboard?
  • alt-ctrl-shift click edit linker?
#6

Thanks, that is workaround. However the buttons include an increasing amount of code so I would be keen to keep the bytes low, especially since it will appear on every item in a list.

#7

As @saqimtiaz pointed out recently, you can create (my words, his paraphrased) “buttons-lite” quite easily using $eventcatcher:

1 Like
#8

Thanks for the tips.

As soon as eventcatcher and message catcher was made available i looked but there is little or no explanation or documentation and depends on prior knowledge or developer insight.

#9

Let me know if any of this is not clear – you only need to watch for $eventcatcher, the <button> element and the actions macro that uses the <<dom-*>> variables:


\define <b>renamer-actions()</b>
<$action-log $$message="renamer-actions" $$all=yes />
<$action-setfield $tiddler=<<dom-foundTiddler>> $field="title" $value=<<dom-newTiddler>> /> 
<$action-deletetiddler $tiddler=<<dom-foundTiddler>> />
\end


<$eventcatcher selector=".rename-btn" $click=<<renamer-actions>> tag=div>
    <table class="renamer-grid">
    <thead><tr><td class="chapsec-matches"><span><$text text={{{ [prefix<curPrefix>count[]] }}}/></span></td><td><dull>Source</dull></td><td><dull>Destination</dull></td></tr></thead>
    <$list filter="[prefix<curPrefix>sort[]]" variable="foundTiddler">
     <$list filter="[prefix<foundTiddler>sort[]removeprefix<curPrefix>addprefix<newPrefix>first[]]" variable="newTiddler">
     <tr>
       <td><button class="rename-btn" title="Rename" newTiddler=<<newTiddler>> foundTiddler=<<foundTiddler>>>{{$:/core/images/done-button}}</button></td>
       <td><$link to=<<foundTiddler>>><<foundTiddler>></$link></td>
       <td><$link to=<<newTiddler>> class="bk-renamer-destination"><strong><<newTiddler>></strong></$link></td>
     </tr>
     </$list>
    </$list>
    </table>
</$eventcatcher>

But really, the example here is all you need to get started.

#10

@TW_Tones where you able to use modifiers keys to assign different functions to click on links

#11

Yes. To make use of the modifier variables I use list widgets to conditionaly display action widgets inside a trigger eg button widget actions= macro or the body of the button.

<$list filter="[<modifier>match[normal]]" variable=nul>
   Action widgets for no modifier here
</$list>

Replace normal with ctrl etc…

On click of the button the modifier variable is set and the action widgets that would be displayed if they were normal wiki text will be actioned.

1 Like
#12

I was trying to open tiddlers in maximized state (only seen in krystal plug in) when i click on a link with modifier key, say shift

This is the action widget that does the same for the current tiddler

\define maximize()
<$action-sendmessage $message="tm-maximize" $param=<<currentTiddler>>/>
\end

<$button actions=<<maximize>>>
{{$:/plugins/rmnvsl/krystal/images/maximize-tiddler}}
</$button

What should I do now to open the tiddlers in maximized state when I click on links