Inline text styling

[RocketGirlNZ]

Hi, can you tell me where to find a list of code snippets for adding styling to shortcodes?
I need inline styling as i do not want to make this global on my site.

I’m putting some tooltips on certain words so that they pop up with a translation. I’m using the following bit of code which is working fine but i want to add a dotted underline:

[extra href="#example" title=“Sight words” info=“tooltip” info_place=“top” style=“color: gray;” “font-weight: bold;” info_trigger=“hover”] Kupu Aronga [/extra]are listed so teachers can see at a glance the focus vocabulary for each title.

i found the code on the renew shortcode page which lists “options: style - add inline styles to the shortcode” https://demo.theme.co/renew-1/shortcodes/popovers-and-tooltip/

It took me forever to add in the text colour - everything i can find online isn’t specifically for use inline so i’m literally grabbing little lines of code and trying them out until it eventually works.

thanks,

[prakash_s]

Hi @RocketGirlNZ

Thanks for writing to us.

You can add inline-style in the Tooltip shortcode as you have found the correct documentation.
There an option called “Style” you can use this option to add inline-style. I checked your shortcode and I found that you have not added style value correctly.

Your shortcode

[extra href="#example" title=“Sight words” info=“tooltip” info_place=“top” style=“color: gray;” “font-weight: bold;” info_trigger=“hover”] Kupu Aronga [/extra]

Correct Shortcode

[extra href="#example" style="color: gray;font-weight: bold;" title="ight words" info="tooltip" info_place="top" info_trigger="hover"] Kupu Aronga [/extra]

You can add a dotted underline as will through inline style for that you need to add border-bottom: 1px dotted #000000;. You can change the colour code #000000 and border size (1px) as per your design

To learn more about border CSS Please have a look at this article

Now your shortcode would be like this

[extra href="#example" style="color: gray;font-weight: bold; border-bottom: 1px dotted #000000;" title="ight words" info="tooltip" info_place="top" info_trigger="hover"] Kupu Aronga [/extra]

Thanks

[RocketGirlNZ]

that’s great, thanks so much, it worked beautifully.

[rubin]

You’re welcome!