[Josef KParticipant]

I’ve got a tool tip on a page:

[extra style=”text-align: center;” info=”tooltip” info_place=”left” info_trigger=”hover” title=”Some extra info……. an entire paragraph.”]
[promo style=”text-align: center;” image=”http://www.mysite.com/wp-content/uploads/2015/04/DSC_0151.jpeg” alt=”The photo”]
<h5 class=”mtn”>The text</h5>
[/promo]
[/extra]

This pops up a narrow black box containing my tool tip.

How do I go about styling this box. I’d like the text to be larger and the width of it to be wider.

Thanks.

[ChristianModerator]

Hey Josef,

Please add the code below in your Appearance > Customize > Custom > CSS.

.tooltip-inner {
    font-size: 20px;
    padding-top: 13px;
}

.tooltip {
    width: 200px;
}

Adjust the values as per your needs.

Hope that helps. 🙂

[Josef KParticipant]

Thanks.

The font size works, but it doesn’t look like

.tooltip { width: 200px; }

is doing the right thing. Instead of making the popup wider, it’s changing it’s horizontal offset.

[ChristianModerator]

Please give us the URL of the page so we could see the issue.

Thanks.

[jennak04Participant]

How do I change the background color of my tooltip? I tried this and it didn’t work:

.tooltip {
color: #ffffff
}

[LelyModerator]

Hello Jenna,

Color attributes refers to the font color. To change the background color of the tooltips, you may use the following custom CSS:

.tooltip-inner{
 background-color:red;/*Change to your preferred color*/
}

Hope this helps.

[jennak04Participant]

It didn’t work :/ Font color changes, but code for background color doesn’t seem to affect it.

[ThaiModerator]

Hi There,

Please try following code instead:

.tooltip-inner {
    background-color: #F90606;
}
.tooltip. .tooltip-arrow {
    border-top-color: #FD0404;
}

If it doesn’t work, please provide us your website URL so we can take a closer look.

Thanks.

[jennak04Participant]

background color worked, but the tiny arrow is displaying as a different color

[Prasant RaiModerator]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[jennak04Participant]

This reply has been marked as private.

[LelyModerator]

Hello Jenna,

Thank you for giving us your admin credentials. Please add the following CSS.

.tooltip.top .tooltip-arrow{
   border-top-color:#FD0404; /*Change this to your preferred arrow color*/
}
.tooltip.right .tooltip-arrow{
   border-right-color:#FD0404; /*Change this to your preferred arrow color*/
}
.tooltip.left .tooltip-arrow{
   border-left-color:#FD0404; /*Change this to your preferred arrow color*/
}
.tooltip.bottom .tooltip-arrow{
   border-bottom-color:#FD0404; /*Change this to your preferred arrow color*/
}

If above doesn’t do the trick, please do give us the exact URL of the page with tooltips.

Thank you.

[jennak04Participant]

It worked! THANK YOU!

[ZeshanMember]

You’re welcome! 🙂

[Author]

Posts