Tooltip Content CSS

scott777 · February 2024

Dear Support,

I am new to this forum.

I would like to style the Tooltip content after hover over certain words in a text. Could you please let me know how to

increase the text font size, as the default is a bit small?
change the line height, font color and the background color?
alignment of the text
the width of the Tooltip box

I have tried the css by referencing to your previous post regarding the tooltip content css dated 2017. They don't seem to work.

https://forum.muffingroup.com/betheme/discussion/33238/tooltip-content-background

Your advice is much appreciated.

Regards,

Scott

Phil · February 2024

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Thanks

scott777 · February 2024

Hi Phil,

Thanks for your response. Below is the link to my website.

https://www.loveforjesus.org/hello-world/

As you can see, a Tooltip is used for the dotted underlined text. The font size appears to be a bit small. Thanks.

Phil · February 2024

Try this:

span.tooltip:before{
 font-size: 20px;
 line-height: 1.3em;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

scott777 · February 2024

That works great. Thanks Phil.

Tooltip Content CSS

Comments

This website uses cookies