MultiLine Tooltip

#1

Is there a multiline tooltip solution available for review? Currently using a data-tooltip method that loads content via attr(data-tooltip), which as I understand limits the input to string only and thus outputs a single line.

I have a tw static table of values with a tooltip for each with the underlying details (4 variables) of the values to display.

#2

I’m unsure what exactly your method is, but dictionary tiddlers seem to respect <br> as tested with the following (tooltip styling from W3 with increased width):

macro ‘tt’ ::
field ‘label’: break

\define tt(label, text)
<div class="tooltip">$label$<span class="tooltiptext">$text$</span></div>
\end

<$transclude $variable='tt' label='^^{{!!label}}^^' text="""<$transclude $tiddler="$:/_/data/def" $index={{!!label}} />"""/>

$:/_/data/def ::
break: Is there a multiline tooltip solution<br><br> available for review?

image

Interestingly, it also looks like macros can be successfully passed via dictionary tids, as I got <<.lorem 2>> to make a huge tooltip with a line break.

1 Like
#3

I belive the simple tooltip is just the matching html “title” attribute.

<div title="this is the tooltip"> 
content 
</div>
  • My previous experience is this kind of tooltip does not allow multiple lines

However there are a range of ways to create popups which are multiline and even allow wikitext, which appear identical to the user but do allow multiline content.

  • For example There are a fews solution in tiddlywiki that allow you to preview the content of a tiddler in a popup.
1 Like
#4

Interesting, I will have to take a look at incorporating.

#5

Not sure if this is useful. A help button macro which I think I got from TWMatt, possibly?
Copy the following into a tiddler and tag $:/tags/Macro

\define HelpButton(label, ButtonText:?) <$tiddler tiddler=<<currentTab>>><<HelpButton_inner $label$ $ButtonText$>></$tiddler>
\define HelpButton_inner(label, ButtonText:?)
^^(<$button popup="""$:/temp/popup/$(currentTiddler)$/$label$""" class='tc-btn-invisible tc-tiddlylink'>$ButtonText$</$button>)<$reveal type='popup' state="""$:/temp/popup/$(currentTiddler)$/$label$"""><div class='tc-drop-down' style='width:200px;max-width:75vw;white-space:pre-wrap;padding:10px;text-align:left;font-size:1.5em;border-radus:0.5em;'><$transclude field="""$label$"""/></div></$reveal>^^
\end

Usage:

<<HelpButton fieldname_in_tiddler>>

<<HelpButton feildname_in_tiddler 'superscript_text'>>

You make a field for each label that contains the help information. This can have html and simple wikitext. Since it is a field linebreaks need to be added using html <br> tags.