Hover effect to TOC items

#1

Hello,

how can I add a hover effect in TOC to all “tree-items” (Folders, Subfolders, etc.) except Tiddlers?

grafik

This won’t work:
grafik

Thanks for Feedback
Stefan

#2

If the html for a “tiddler toc item” is not distinguishable from “tree-items” then it wont be possible with css alone since CSS cant style an element based on its content. Could you provide your code for the TOC? It would be easier for us to help you

1 Like
#3

Hello @telumire,

I used this code for TOC:

<div class="tc-table-of-contents">
<<toc-expandable "Inhalt" "sort[title]">>
</div>
1 Like
#4

Try this:

.tc-table-of-contents .tc-tiddlylink:hover { color: rgb(255,201,102) !important; }
#5

Try this:

.tc-table-of-contents .tc-tiddlylink:hover { color: rgb(255,201,102) !important; }

This code activates hover of tiddlers and not the “tree-items”.

grafik

#6

The only solution that I can think of is to make a customized TOC macro based off the original that hacks in an “id” property in a div or span tag around each folder entry based on a hash of the tiddler name. I would do a SHA256 of the tiddler name to easily avoid duplicates and white spaces.
\define currentTiddler_hash() {{{[<currentTiddler>sha256[]]}}}

Then you can built up a stylesheet with a List widget generating a bunch of #$(currentTiddler_hash)$:hover { color:x } based on the appropriate filter.

Pretty brute force but you should be able to narrow it down to only the entries you want the hover action on.

Sorry … not a cut and paste solution but a process that should work. I played around with a proof of concept and targeting a div id in a CSS stylesheet seemed to work fine.

/Mike

1 Like
#7

I like :slight_smile:

I think I’d avoid the id attr. Perhaps, instead, data-toc-id or even a class.

Or, maybe the CSS :is() function could shorten the generated rules?

#8

So just to be sure : you want a CSS rule that match any “toc item” (Folder, subfolder) EXCEPT “Lorem” ?
Then using the “toc-selective-expandable” macro you can target the fold button, and style a pseudo element on hover:

.toc-item a{
position:relative;
z-index: 1;
}
.toc-item a:hover .tc-btn-invisible.tc-popup-keep:after{
position:absolute;
z-index: -1;
content:" ";
border:solid 1px;
display:block;
inset:0;
}

toc hover
(dont pay attention to the “subfolder” name, I goofed up)

However it’s very limited (you cant modify the text of the link in the TOC with this method for example).
To do more you would need to target the link itself which would need some way to be distinguishable (a class, attribute, sibling, id,…)

#9

Thanks to all for your input.

I mentioned here:

grafik
grafik771×470 13.1 KB

Both codes of @EricShulman and @telumire are working.

Why I wasn’t able to see the hover effect was this config:
grafik

→ removed toc-link (done for “Folder 1”, “Folder 2” and “Subfolder 2.1”) using Eric’s code:

grafik

→ hover works…but it isn’t optimal, because the “tree-items” are “functional” tiddlers - there is no need to have the option to open them…

#10

In TW you should not use IDs for CSS settings. Per definitions IDs are only allowed once. We can’t guarantie this with TW, since it’s possible to open a tiddler in the sidebar and in the story river. If IDs are used it doesn’t work.

1 Like
#11

This should work with toc-link set to no:

.tc-btn-invisible.tc-popup-keep:hover{
background:red;
}

style toc.json (641 Bytes)

Next time please provide your tiddler :

image
image866×688 61.7 KB

Or if you are working with several tiddlers :

image
image944×485 34.4 KB

#12

Thanks @telumire - works like a charm! :wave:

#13

Just a little add on tip, although the toc macros are available, and when you look at them to hack them they are quite complex, it is fairly easy to build your own toc macro the traverses the tiddlers then you are in a position to design in features like in the OT such as hover.

Building your own TOC makes use of a “Recursive” code pattern, and a test to stop loops.

For example this is also a TOC macro without loop checking;

\define each-other-level(filter)
<li><$link to=<<currentTiddler>> ><$text text=<<currentTiddler>>/></$link></li>
<ul>
<$list filter="$filter$">
   <<each-other-level $filter$>>
</$list>
</ul>
\end
\define first-level(filter)
<ul>
<$list filter="$filter$">
   <<each-other-level $filter$>>
</$list>
</ul>
\end

Start in TableOfContents<br>
<$tiddler tiddler="TableOfContents">

<<first-level "[is[current]tagging[]]">>

</$tiddler>
  • In the above you could replace the each-other-level <li></li> with a button and a tooltip which is an “on hover”.
  • You could also introduce custom class and styles where desired, so you do not need to override the core classes.