#Tooltip Formatting

1 messages · Page 1 of 1 (latest)

prime tinsel
#

Wondering if anyone has a suggestion about how I could (easily?) go about getting something like what's in the screenshot into an MT macro button Tooltip, while still being in semi-formatted layout versus a text dump?

Thanks!

Screenshot_2025-11-07_123733.png
austere bloom
#

How familiar are you with html and css?

#

You could make it look exactly like that

prime tinsel
austere bloom
#

Well you can write a macro that will do it for you once you figure out how to make it look good

prime tinsel
austere bloom
#

Basically you wrap the entire tooltip in <html></html>, sections are <div></div>, tables are <table> and then <tr> for rows and <td> for cells within the row, and close everything with </whatever>

prime tinsel
austere bloom
#

You define styles like <div style="width:300px; font-size:2em;"> etc

#

There's a page on the wiki that tells you the most common style parameters that are accepted

prime tinsel
austere bloom
#

Chatgpt could probably get you most of the way there

#

Then, once you know what it will look like, you'll want to create a macro creating macro that takes data and then outputs them in the fields, and then builds the tooltip for you according to whatever scheme

#

You can do those purple lines by making a <div> with a top border

#

I'm not sure what font that is, you'll want to be careful that you don't specify a font that your users might not have or it will look potentially bad

#

If any of the tooltips need images, that's pretty straightforward as well, the images just need to be on some map as tokens and you just need to know the asset id

#

I'm guessing shape-shifts and magic are green bc they are some kind of link? That might be harder

#

Easy to do links that output in the chat but I've never tried that in a macro tooltip

idle saddle
#

Probably outside of your scope, but I've been using overlays and frames to create hotbars for player classes. The contents of most spell and ability tooltips are stored in a large JSON Object inside of a libtoken's properties, and all images are stored in tables, which the JSON refers to.

image.png
#

I originally made each ability their own macro, but that quickly grew into an absurdly large panel.

#

The JSON would look something like this:

image.png
#

As for the green links, I imagine you could implement a 'Keyword' search that would automatically replace the word with a link to a specific page.

#

Just wrapping an <a> element around it with a title would allow a mouseover to provide more detail.

austere bloom
#

Well but the issue is it would be difficult to click on bc the tooltip shows up when you mouse over the button, and you could do a long delay but that would be annoying

idle saddle
#

True, frames and overlays would be better suited for browsing

austere bloom
#

In my framework, this is what macro button tooltips for spells looks like:

image.png
idle saddle
#

Is the text hardcoded into the tooltip, or can it pull it from some other source, like a table or properties?

austere bloom
#

`<html>
<div style="
background-color: #dbc385;
width: 300px;
border: 1px solid #dbc385;
border-style: inset;
padding: 0px;
margin: 0px;
">
<div style="
background-color: #FAF9F8;
width: 100%;
border: 5px solid #002a17;
padding: 5px;
margin: 1px;
">

<table style="width:100%;font-size:16pt;font-family:Arial;margin:0px;padding:0px;">
<tr>
<td><strong>Daze</td></strong>
<td style="text-align:right"><b>Cantrip 1</b></td>
</tr></table>
<div style="border-top:2px solid black;padding: 3px 0px 0px 0px;width: 300px;">
<table border="0", bgcolor="#5a0308", style="font-size:13pt;font-family:Century Gothic;font-weight:bold;border-spacing:0px">
<td style="border:3px solid #d9c484;"><font color="white"> Cantrip </font> </td>
<td style="border:3px solid #d9c484;"><font color="white"> Enchantment </font> </td>
<td style="border:3px solid #d9c484;"><font color="white"> Mental </font> </td>
<td style="border:3px solid #d9c484;"><font color="white"> Nonlethal </font> </td>
</table>
<b>Traditions</b> arcane, divine, occult<br>
<b>Cast</b> <img height=13 width=20 src="asset://6d8ac5fce8e04fc97996d921acea5499" /> somatic, verbal<br>
<b>Range</b> 60 feet; <b>Targets</b> 1 creature <br>
<b>Defense</b> Will; <b>Duration</b> 1 round</div><div style="border-top:1px solid black;">
You cloud the target's mind and daze it with a mental jolt. The jolt deals <b>2d4 mental damage</b> with a basic Will save. If the target critically fails the save, it is also <u>stunned 1</u>.<hr />
<b>Heightened (+1)</b> The damage increases by 1d4.
</html>`

#

It could pull it from somewhere else but I just have it hardcoded in. I have a macro that makes new spells and one of the things it does is make the button

#

It's very similar to what is output in chat when you push the button, except that there it does the calculations for damage etc.

image.png
prime tinsel
austere bloom
#

If you want it to take token properties, you have to do it slightly differently. The whole tooltip has to be string inside {""} and then you can concatenate in whatever variables. I do this for monster abilities so I can turn on the optional "proficiency without level" setting and immediately change all the tooltips accordingly

prime tinsel
# austere bloom If you want it to take token properties, you have to do it slightly differently....

All that was super impressive, and maybe when I'm more confident I'll endeavor a project like that. But for now, I'm stoked I figured out a lazy way to use @wanton cloud's https://discord.com/channels/296230822262865920/1393552072560873494 Lib by calling a macro with the spell's name and it pops up a frame with what I need to see. It doesn't mimic the DDB layout or anything, but meets my immediate needs.

Just had to add a conditional so that the frame doesn't pop-up if a token is selected, so that I can still easily "cast" by clicking the button, as needed.

Thanks again for showing me how cool it can get with some time/effort (and more CSS/HTML savvy). 🙂

prime tinsel
austere bloom
#

Like let's say you want it to show some saving throw or something and there's a variable called spellDC on the token. Then the tooltip could be {"blah blah blah, save vs DC "+spellDC+". Blah blah blah blah."}

prime tinsel
wanton cloud
prime tinsel
prime tinsel
# austere bloom Like let's say you want it to show some saving throw or something and there's a ...

So would that be similar to how I would want to do something like have a condition run to determine whether the tooltip should continue to the <html> portion or abort and not show the remainder of a tooltip?

Since the following doesn't work (just makes it show the entire tooltip as a huge, ugly text field):

[h,if(getSelected() != ""): abort(0)]
<html>
  <style>
    .blah blah blah
  </style>
  <body>
    Bladh blah blah
  </body>
</html>
prime tinsel
silk crest
#

That one should work… For Swing to process text as html, it must start with exactly six literal characters: <html>. Anything else will be raw text. That’s why tour post from yesterday didn’t work: the <html> was on a new line after the close bracket, which means it has a \n in front of it.

#

So I’m surprised you hat your html var assignment doesn’t work, unless it has some whitespace in front of it when substituted. I’ll go back and check the code you pasted, but I’m on my phone so it’s kinda hard to read…

#

I don’t see where you posted any code that uses the html var, so I can’t investigate further. 🫤

prime tinsel
# silk crest I don’t see where you posted any code that uses the `html` var, so I can’t inves...

I wasn't thinking it needed any code for the tootlip output, as the [r:] should already display the output, no? Was thinking it wouldn't actually need to be called if it was already displayed. Maybe there's a better way I could do that?

I guess I theortically should be able to just use an [h: for the conditional to avoid any output, ala:

[h,if(getSelected() != ""): abort(0)]

And then roll into the output without the variable:

[r:"<html>
  <head>
    <style>... ... ...

Which I actually just tried and it's still just outputting as a big chunk of raw text to the tooltip window (so, same result as if it was in a variable declaration).

silk crest
#

Let me rephrase what I wrote above. Any whitespace prior to the <html> will cause it to be treated as raw text. So if you have a line like, [h: “this is a test”] which is then followed by another line, such as [h: “this is another test”], you now have a newline character between those two commands. That newline character, referred to as \n, will be in front of any output that the rest of the macro produces. If you want that output to be treated as HTML, you need to remove the leading whitespace.

Note that you wouldn’t see that leading whitespace when it is output to the chat window, for example, because the chat window is always HTML and whitespace between and around most HTML elements is ignored when it’s rendered to the screen.

#

In your last example, try removing the newline character between the [h, if…] statement and the following [r: …] statement. Put them on the same line and the newline character goes away.

#

I don’t work with tooltips much, but any time I try to build HTML, I generally put it into a variable and then clean up the whitespace before I output the variable. (This also lets me display the HTML itself by replacing all occurrences of < with &lt; so that it displays properly when rendered.)

prime tinsel
silk crest
#

Is your campaign small enough to share? I’d be happy to take a look…

prime tinsel