Use tooltip to show full tiddler name in Recent and Open tabs

I have TW 5.2.7 which I use with Chrome. On the right side of my TW is a set of 4 tabs: Open, Recent, Tools, and More. I have long tiddler names, which is required for my situation, but I need to have my browser window with TW take up less than half the screen width, so the TW browser window is narrow. I only have 1 monitor.

Due to the long tiddler names and narrow window, the longer names do not wrap on the Open and Recent tabs and I cannot see the whole tiddler name. The problem here is I take lots of notes for tutorials with names like “Data Processing with Azure Pt 1”. And Pt 2, and Pt 3. The Pt 1, Pt 2, and Pt 3 are not visible to me and making the window wider is not an option.

Can we have a change to TW which, when you hover your most over a tiddler name, it shows a tooltip with the full name of the tiddler on the Open and Recent tabs? That would be very useful.

Thanks!


on notebook theme, this long title link is auto wrap, maybe can some css for it

The “Recent” (and “More>Recent”) tab contents are generated by the <<timeline>> macro (defined in $:/core/macros/timeline. If you look at that tiddler, you will see a note that says:

<!-- Override one or both of the following two macros with a global or local macro of the same name 
if you need to change how titles are displayed on a timeline -->

\define timeline-title() <$view field="title"/>
\define timeline-link() <$link to={{!!title}}><<timeline-title>></$link>

Thus, adding a tooltip to the output is incredibly easy!

All you need to do is:

  • Create a new tiddler (e.g., “ShowTimelineTooltips”)
  • Give it a tag of $:/tags/Macro
  • Enter this content:
\define timeline-title() <span title=<<currentTiddler>>><$view field="title"/></span>

Adding tooltips to the items in the “Open” tab is only slightly more involved, as there isn’t an already existing “hook” for customization, so you will need to modify one line in the TWCore shadow definition, like this:

<div class="tc-sidebar-tab-open-item">

to

<div class="tc-sidebar-tab-open-item" title=<<currentTiddler>>>

enjoy,
-e

3 Likes

Thank you. I don’t have time to try it just yet but I will get to it in a few days.

Ok I got both the Recent tab and Open tab to show the whole tiddler title in the tooltip. Thank you so much! Those step-by-step instructions help a lot since I don’t do any macros or anything fancy in TW.

I did a save and refresh after entering the info for wrapping the titles on the Recent items list in the Sidebar. Here is my macro:

  • Name: timeline
  • Contents: \define timeline-title() <span title=<<currentTiddler>>><$view field="title"/></span> with no CRLF.
  • The tag for this macro matches caps of what you typed: $:/tags/Macro

I made my Chrome v120 browser window more narrow and the long titles do not wrap on the Recent items list. I also have CSS to customize the theme to make the main story river a percent of total width of the browser window, and the sidebar a percent of width also.

Any idea what I did wrong?

EDIT: My apologies, I’m very tired. Oh wait, that was for showing the Recent item title tooltip, which it does. Is there a way to wrap the titles on the Recent Items list in the Sidebar?

Using the same technique as previously shown for adding tooltips:

  • Create a new tiddler (e.g., “ShowTimelineTitlesWithTooltipsAndWordWrap”)
  • Give it a tag of $:/tags/Macro
  • Enter this content (all on one line)
    \define timeline-title() <span title=<<currentTiddler>> style="white-space:normal;"><$view field="title"/></span>

Note the style="white-space:normal;" syntax.

Ok I have a single tiddler named mytimeline where I put your macro. My intention is this will wrap the titles on the Open Sidebar tab and Recent Sidebar tab.

I changed the macro to be \define timeline-title() <span title=<<currentTiddler>> style="white-space:normal;"><$view field="title"/></span>.

I saved and reloaded the Tiddlywiki. Item titles on the Open list wrap, item titles on the Recent list do not wrap but the tooltip is still there.
image

What did I do wrong here?

EDIT: The only contents of $:/core/ui/SideBar/Recent is:
<$macrocall $name="timeline" format={{$:/language/RecentChanges/DateFormat}}/>

Not sure what’s going on here for you to cause any trouble; I just followed EricShulman’s advice and did see the expected wrap-behavior in the Recent sidebar.

Note, you should not need to save and reload to see any of these changes. (Only plugins and some other startup-related customizations need a reload.)

Here’s where the solution is shown working on my demo site. You should be able to drag and drop this tiddler to your own wiki: 🎯 Quick demo — ... with wrap-my-timeline

@C_Bacca,

Although you asked about solutions that involve a tooltip and/or a wrap-title, it occurs to me that you might also/instead consider having the caption field display in your recent and open tabs. This kind of solution is one that I often use in projects with long titles. The caption field can be a tiddler “nickname”, and can put the distinguishing info up front.

The expression you need to display the caption in place of title is:

<$transclude field="caption">{{!!title}}</$transclude>

If no caption exists, the title is displayed instead. So unless you have captions accomplishing some other task in your wiki, this solution just offers another way to help your future self find what you need in the sidebars.

At my demo site, I’ve tweaked the timeline-title macro not only to wrap the tiddler title, but to display caption instead if caption exists (title will display otherwise): 🎯 Quick demo — ... of wrap-my-timeline-use-caption

Side note (for you bibliography geeks out there): the caption field, unlike the title field, can include style markdown, such as inline italics for a title, or even inline css such as @@color:green; 2024 @@ planning notes

Enjoy!

2 Likes

Something I would like to tack on, I find using this can be a bit problematic if for instance, you have a caption field, but no caption field value, which results in nothing being shown.

An alternative I’ve used is <$text text={{{ [<currentTiddler>has:field[caption]!is[blank]get[caption]else{!!title}] }}}/> but I’m wondering if this is intended behavior, or if this alternative can be done better?

The get[...] filter operator only produces a value if the specified field exists AND is non-blank. Thus, you can simplify your syntax to:

<$text text={{{ [{!!title}get[caption]else{!!title}] }}}/> 
2 Likes

Awesome, Thank you @EricShulman :grinning_face_with_smiling_eyes:

This approach steers around the risk of a gaping empty line for tiddlers with existing-but-empty caption fields.

Note, however, that this approach does not wikify. Hence it won’t (at least in current form) harness the power of caption-based links to include italics, color, etc.

It’s quite rare (and always a mistake) for me to have an empty (but existing) caption field, so I don’t mind the risk pointed out by @Justin_H.

Still, always good to have multiple options available to folks!

For plain text captions I expect I will now mostly use;

\function caption.title() [{!!caption}else{!!title}]

<$link><<caption.title>></$link>

As in the OT the user wants the titles to be a tooltip. If the widget you are using does not have a tooltip you can always use a span/title.

  • As eric pointed out.
<span title={{!!title}}>will have a tooltip of title</span>

However, the Link widget does have a tooltip parameter.

\function caption.title() [{!!caption}else{!!title}]

<$link tooltip={{!!title}}><<caption.title>></$link>

However, an equally simple approach to wikifying captions needs to be developed, I think the use of a “list item template” makes sense because it can contain the complexity rather than the list widget.

It seems the form below may be the most reliable;

<$transclude field=caption><$view field=title/></$transclude>
or for the OT
<span title={{!!title}}><$transclude field=caption><$view field=title/></$transclude></span>

  • Attempt to transclude the caption if no result view the title.

However if we want a link, we do;

\procedure caption-title() <$link tooltip={{!!title}}><$transclude field=caption><$view field=title/></$transclude></$link>

<$list filter="[tag[TableOfContents]]">
<<caption-title>><br>
</$list>