Tooltips in richtext component?

hi, i’m trying to use the richtext component to format a bunch of words with individualized colors (red, green, blue), and in the case of green also including a tooltip for the word. see the richtext code below.

the color coding works, the tooltip doesn’t. no errors. i suspect tooltips are overruled somehow with the tooltip attribute that can be set for the richtext component.

any ideas?

<span style="color:blue">burrowing</span> <span title="carnivorous insectivorous omnivorous " style="color:green">herbivorous</span> <span style="color:blue">Australian</span> <span style="color:blue">marsupials</span> <span style="color:blue">about</span> <span style="color:red">the</span> <span style="color:blue">size</span> <span style="color:red">of</span> <span style="color:blue">a</span> <span style="color:blue">badger</span> 

The problem is that the title attribute isn’t allowed in the restricted_html of a rich text component. I created a form with custom html and copied your html into that and the tooltip was there as expected.

hi duncan, thanks, and apparently i am missing something. in the components that i can chose from, i don’t see a custom html one. we’re exploring at this stage, so running the free version. maybe that’s the case?

Nope! You have to make a form of that type here:

And then make that form a custom component:

1 Like

Hello @bureauwo,

You need to create a form and turn it into a custom component before it shows up in the Toolbox - this documentation will help.

This is probably a bit overkill for what you’re doing right now but we also have a full tutorial on creating components from your own HTML and CSS. The CSS part may not be relevant to your task at the moment but I thought it may be worth you knowing it’s an option (you don’t have to use CSS to build apps with Anvil, but it’s there if you need it).

I hope that helps. Welcome to Anvil!

Ryan

2 Likes

You can also create an HtmlTemplate in code, and it works the same way as a custom HTML form. Here’s an example: Anvil | Login

1 Like