Hello forum,
is it possible to get the pulldown menu of the toolbar with a mouse hover instead of a mouse click?
Thanks for feedback.
Stefan
This seems to work:
Locate $:/core/ui/Buttons/more-tiddler-actions. Inside it, note there are two $reveal widgets. Delete this one:
<$reveal state=<<qualify "$:/state/popup/more">> type="popup" position="belowleft" animate="yes">
…including its closing tag that is located at the very bottom of the tiddler. Leave the content of the widget intact, i.e that is the very dropdown itself.
Save the tiddler.
Create a tiddler tagged $:/tags/Stylesheet with type text/css and put this into it:
.tc-titlebar button[title="More actions"] ~ .tc-drop-down {
display:none;
margin-top:-2px;
}
.tc-titlebar button[title="More actions"]:hover ~ .tc-drop-down,
.tc-titlebar button[title="More actions"] ~ .tc-drop-down:hover {
display:block;
position:absolute !important;
transform:translateX(-90%);
}
Thanks @twMat for feedback.
It doesn’t look like expected:
\whitespace trim
\define config-title()
$:/config/ViewToolbarButtons/Visibility/$(listItem)$
\end
<$button popup=<<qualify "$:/state/popup/more">> tooltip={{$:/language/Buttons/More/Hint}} aria-label={{$:/language/Buttons/More/Caption}} class=<<tv-config-toolbar-class>> selectedClass="tc-selected">
<$list filter="[<tv-config-toolbar-icons>match[yes]]">
{{$:/core/images/down-arrow}}
</$list>
<$list filter="[<tv-config-toolbar-text>match[yes]]">
<span class="tc-btn-text">
<$text text={{$:/language/Buttons/More/Caption}}/>
</span>
</$list>
</$button>
<div class="tc-drop-down">
<$set name="tv-config-toolbar-icons" value="yes">
<$set name="tv-config-toolbar-text" value="yes">
<$set name="tv-config-toolbar-class" value="tc-btn-invisible">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewToolbar]!has[draft.of]] -[[$:/core/ui/Buttons/more-tiddler-actions]]" variable="listItem">
<$reveal type="match" state=<<config-title>> text="hide">
<$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]]">
<$transclude tiddler=<<listItem>> mode="inline"/>
</$set>
</$reveal>
</$list>
</$set>
</$set>
</$set>
</div>
It looks like you didn’t create the stylesheet tiddler as I detailed. Please carefully see if you followed the steps I outline.
My code works on tw .com so it is something specific about your wiki. Possibly some styling conflict.
To see that the “more button” is actually targeted by the styling, and that it is only that button that is targeted, test to replace the whole stylesheet content with the following which should result in the “more button” being red, and nothing else:
.tc-titlebar .tc-tiddler-controls button[title="More actions"] {background:red} }
Did it work? Is only the “more button” red? …then I’m not sure what is wrong. But I also note the following two buttons so I suspect that possibly one of them will turn red also?
If you uninstall these (regardless if they turned red or not) and my original code starts to work, then we can take it from there to investigate where the conflict is.
Tested it → no button becomes red.
I found the problem - its language related…
Sorry, I realized it too late.
Hover works fine, but I can’t select any item, because the window is too far away from the button.
When I move the mouse to the window, its already gone.
→ code changed:
I realized, that the window gets smaller and the text is cutted now…
Ah, good you found it.
The distance between the button and the dropdown is the margin-top:-2px; bit. You can see if -3px or more solves it.
If that gets too close so it is visually distracting, there are probably tricks you could use like adding an invisible top border to the dropdown or some such.
EDIT: Ah, in your image I see the dropdown is too far to the side! OK, that position is controlled with transform:translateX(-90%). Change the number to see what works.
1 Like
(Please don’t add new issues by modifying an already answered post. It is unlikely that it is seen even if I did see it this time.)
Default min-width is 380px so you can experiment with this number, for example insert min-width:400px !important; below margin-top.... I’m not sure you need the !important command but this ensures that your width gets top priority.
