Tooltip Content CSS

scott777

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott777

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

Try this:

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

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

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott777

That works great. Thanks Phil.