[educainventionsParticipant]

Outsider text description [extra href="#example" title="Technical information" info="popover" info_place="bottom" info_trigger="hover" 
info_content="Insider text. I'd like the insider text bigger" ] More info [/extra]

I have tried to add style as it suggested here. However it only increased the text “More info”:

Outsider text description [extra href="#example" title="Technical information" info="popover" info_place="bottom" info_trigger="hover" style="font-size:200%" 
info_content="Insider text. I'd like the insider text bigger" ] More info [/extra]

In addition to increase the font size (it could be too small to see it well for our clients), I’d like to increase the width of the popover (let’s say to the 80% of the screen width). Any hint about how to achieve both?

Thanks in advance! 🙂

[LelyModerator]

Hi There,

Please try this custom CSS on Appearance > Customize > Custom > Edit Global CSS:

.tooltip {
    font-size: 30px !important; /*Adjust your preferred font size.*/
}
.tooltip-inner{
  max-width: 250px; /*Adjust this accordingly. This is the width of the popover and it's set to 200px by default*/
}

Hope this helps.

[educainventionsParticipant]

I have tried it. It does not work.

I also have tried to include different things like the following one (on http://www.educainventions.com/compatible-smartphones/):

/* Wider popover and bigger font-size
*/
#popover627535 .tooltip {
    font-size: 30px !important; /*Adjust your preferred font size.*/
}
#popover627535 .tooltip-inner{
  max-width: 250px; /*Adjust this accordingly. This is the width of the popover and it's set to 200px by default*/
}

That is not working either.

[ChristopherModerator]

Hi there,

Please try this code :

.tooltip-inner {
    width: 250px;
    font-size: 17px;
}

Hope it helps.

[educainventionsParticipant]

Hi. Thanks for your attempt! I have added that code in the custom css of this page: http://www.educainventions.com/compatible-smartphones/

However it does not seem to change anything.

Any other idea?

[RahulModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[educainventionsParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thank you for the credentials, I did update the code and its working now. Please clear your browser’s cache before you preview the page.

To other users who might found this thread, here the css code.

/*wider popover*/
.popover {
	width: 350px !important;
}

/*popover title font-size*/
h3.popover-title {
	font-size: 1.25em;
}

/*popover content font-size*/
.popover-content {
	font-size: 0.75em;
}

Thanks.

[educainventionsParticipant]

Thanks to you! 🙂

[ChristianModerator]

You’re welcome.

[Author]

Posts