Tooltips for tagpills

[jonnie45]

Hi,

Just looking for pointers or comments before starting to try and put together to achieve tooltips on tagpills.

I usually find a single word displayed in the tagpill is enough to remind me what it’s all about but some could do with a whole line of text explanation. I have over 400 tags and it just keeps growing - not always easy to remember the intended semantic scope of a particular tag when limited to one or two short words. I would like to associate a text field with a selected subset of my tags, ones that require additional explanation, and have a tooltip appear when I “mouse over” any rendering of that particular tag whether on sidebar or in an open tiddler “tool bar header area”, Ideally the tooltip would be identical in look and feel to the tooltips that appear on tiddler toobar buttons and so on.

95% of my tags don’t need further explanation so I would want to try and avoid slowing everything down with exhaustive procedures.

I note that changing the colour of a tagpill results in the creation of a non-system tiddler with the same name as the tagname which includes a field “color” so I wonder if a convenient method would see the creation of a similar non-system tiddler to include a field “tooltip” which would then get picked up by custom changes to the rendering of that tag.

I don’t want “mouse click” pop-ups, prefer the look and feel of the existing tooltip feature on buttons which appear when the mouse pointer hovers over.

Thanks for any pointers.

[EricShulman]

Give this a try:

edit the $:/core/ui/TagTemplate TWCore shadow tiddler
wrap the $macrocall within a <span>...</span>, like this:

<span title={{!!tooltip}}>
<$macrocall $name="tag-pill-body"
	...
/>
</span>

Then, edit the $:/TagManager TWCore shadow tiddler and find this:

<tr>
	<td><<lingo Icon/Heading>></td>
	<td><$edit-text field="icon" tag="input" size="45"/></td>
</tr>

and add this immediately after it:

<tr>
	<td>Tooltip</td>
	<td><$edit-text field="tooltip" tag="input" size="45"/></td>
</tr>

Now, when you use the $:/TagManager (invoked from the sidebar More > Tags, "tag manager" button), you can click on any tag “info” button (the far right column) to enter tooltip text for that tag.

enjoy,
-e

[jonnie45]

Works perfectly! thanks very much Eric.

[Springer]

This simple solution is now integrated into quick-demo here.

(I think it plays nicely with the tooltips-for-fieldnames idea I’ve been tinkering with. Fantastic for solutions that may be developed by one person, while others need to do data-entry or technical follow-up.)

[nemo]

I expect (when I have a bit of time free for this) that I’ll be pulling this from your demo, since you have the count within the tag pill (I have a tag cloud which has the count as the tooltip (but only on the tagcloud), but inside the tagpill everywhere allows tag tooltips to coexist. Perfect!

[jonnie45]

on the quick demo from Springer - I like the additional info icon in the tag - would cut down on speculative mouse pointer hovering

[Springer]

@jonnie45

I like the additional info icon in the tag - would cut down on speculative mouse pointer hovering

The presence of the () icon is not automated in any way, yet. It could be, though, using the cascade for icons…

[jonnie45]

Updates:

1. I have tried moving the closing (new) span tag from Eric’s original solution to a new position. Ok I am a little out of my depth with this level of Tiddlywiki coding but experimentation so it might require a more experienced eye. The reason for this was that as things stand, when the drop down is visible any item in that dropdown will also invoke the tooltip when the mouse hovers over. This is confusing since the tooltip relates only to the tagpill from which the pulldown descended - it does not apply to the tiddlers that share that tag. I moved the closing span as follows…

   <span title={{!!tooltip}}>
	<$macrocall $name="tag-pill-body"
		tag=<<currentTiddler>>
		icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
		colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
		palette={{$:/palette}}
		element-tag="$button"
		element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter="[subfilter{$:/core/config/TagPillDragFilter}]" tag='span'"""
	/>
   </span>

This means that the <$reveal> which follows immediately does not trigger the tooltip.

2. I mused over the possibility of a solution for mobile devices which don’t support “hover” or “mouse over”. So I added one line of code to the <$reveal>

	<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below" animate="yes" class="tc-drop-down">
		<$set name="tv-show-missing-links" value="yes">
			<$transclude tiddler="$:/core/ui/ListItemTemplate"/>
		</$set>
        <div class="tagtooltipdiv"><p class="tagtooltipp">{{!!tooltip}}</p></div>
		<$list filter="[all[shadows+tiddlers]tag[$:/tags/TagDropdown]!has[draft.of]]" variable="listItem"> 
			<$transclude tiddler=<<listItem>>/> 
		</$list>
		<hr>
		<$macrocall $name="list-tagged-draggable" tag=<<currentTiddler>>/>
	</$reveal>

The extra line is the div statement which includes a class for both the div and the paragraph it contains, I wanted to leave it up to custom CSS to decide how this paragraph looks, in my case I wanted italics and a light grey text to ensure that the paragraph does not detract from the main “show” which is the list of tiddlers that share that tag.

I am not such a proficient TW coder that I can see for myself whether this is the most professional way of adding that paragraph of tooltip text to the dropdown. I have packaged the whole thing as a plugin but it is still rough and ready.

Some screen grabs to illustrate…

And then if my mouse is over the tagpill (the text is not truncated on the left, I just cropped the image a bit too much on that side, mouse pointer not shown but was over the tagpill )

Which is fine, if the duplication bothers me I just need to move my mouse off the tagpill once the dropdown is there, to deal with this completely I guess it would be necessary to check if the device supports mouse-hover etc - I don’t see it as a big problem.

[EricShulman]

@jonnie45

I moved the closing span as follows…this means that the <$reveal> which follows immediately does not trigger the tooltip.

What you have done is exactly what my instructions said to do:

@EricShulman

wrap the $macrocall within a <span>...</span>

I can only conclude that your initial attempt incorrectly placed the closing </span> after the </$reveal>

[jonnie45]

Whoops - my bad, sorry Eric.

If its ok with you I am tempted to delete my first point in my previous post so that this thread reads more easily for future visitors.

thanks again for the solution and sorry for my bad.

[EricShulman]

While you might be inclined to edit your post, I suggest leaving it as-is. Even simple mistakes can provide helpful instruction to others, if only to illustrate how small errors in implementation can produce noticeably different results.

-e

[Springer]

@EricShulman

What you have done is exactly what my instructions said to do:

@EricShulman

wrap the $macrocall within a <span>...</span>

…

@EricShulman

I can only conclude that your initial attempt incorrectly placed the closing </span> after the </$reveal>

Still, one good thing about that miscue is: maybe it actually IS nice if the tooltip appears in the dropdown. Maybe a person clicked on the tagpill without hovering, and appreciates the tooltip appearing in the dropdown. So on my demo, I added this line to a tiddler tagged $:/tags/TagDropdown:

{{!!tooltip}}

with the list-before field created, but left blank.

(Actually, I did something more style-intensive. But this basic idea gets the tooltip showing at the top of the dropdown.)

[Ste_W]

As hovering is tricky on mobile i appreciate it being there on the drop-down.