tooltip customizations

6 posts in this topic



I am working with the tooltip with title caption.


How can i change the background of this to #502000 and the font color to white?


Is it possible to cut off the title caption if not used?


Is it possible to add images to the tooltip? How do i control the height of this?


Is it possible to use the modal popup as a hover tooltip? Or is this just a crazy idea?


Thanks for answering.


A url to see the work:

Share this post

Link to post
Share on other sites



1. To change the style of a PopOver, I recommend you review your compiled CSS and then search for popover, all the styles will be visible and you can then copy these and add them to your custom CSS, remember to add the PageLines overrides so that your custom CSS overrides the default CSS.


You can find the PageLines Overrides here -


2. You can by using display:none but this will remove the title area from all popovers.


3. You can not use an image with Tooltips unfortunately.


4. Not sure what you're referring to when you say "Is it possible to use the modal popup as a hover tooltip? Or is this just a crazy idea?"

Share this post

Link to post
Share on other sites

Hi Danny,


It's a liitle more complex.

There is no complied css. There is a jquery script and some code, without css.


In the release notes 2.4 there seemes to be a solution for the tooltip css but i can't find it.


Any other suggestions?


4. Is it possible to "restyle" the modal window to become a hover instead of a click item.

Share this post

Link to post
Share on other sites

The Popovers are in compiled CSS, I have just this moment checked. So view your site, then inspect it using Firebug or similar tool and then right click on compiled CSS and open in new tab, then use the find option in your browser and search for popover, all the css is there for you to use and override.


For example,


#site .popover {
#site .popover .popover-title {

It is most likely possible to change the functionality of the modal but that is beyond our support here, I recommend you contact one of our Pros.

Share this post

Link to post
Share on other sites

Hi Danny,


I found the compiled css in the folder uploads in wp-content, pagelines. I didn't know it is there.

This i used as a basis voor css to style.css in plugin customization.


As you can see it worked! I also learned the one tooltip is called popover the other one is called tooltip. Is there any written doc about this btw?


Than i ran into another matter: i created the style.less file and put all the css in there and deleted the style.css. Copy offline! Everything worked, except the popover. It changed to default. Any suggestions? BTW my css/less editor is empty. So no interference from there. I now moved back to only style.css and everything works as expected.



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • Tooltip/Popover help
      By bjs198
      Hi team,
      Can someone help me with a simple but frustrating issue? I'm just trying to get a simple tool tip or popover show when I roll the mouse over a hyperlinked image...
      [pl_popover title="Title" content="..." position="bottom"]<a href="" target="_blank" ><img src="" height="20" width="30"></a>[/pl_popover]
      Am I being st00pid?
    • Tooltip no work in 2.3
      By batman+

      The toolptip with this format:

      This is a [pl_tooltip tip="Cool" location="right"]tooltip [/pl_tooltip] example.
      This is a [pl_popover title="Title" content="..."]popover[/pl_popover] example.

      stopped working after upgrade to 2.3

      I wrap it in pl_raw and it did not work, for example:

      This is a [pl_raw][pl_tooltip tip="Cool" location="right"]tooltip [/pl_tooltip][/pl_raw]example.

      I've tried in a test forum without plugin and CSS code.

      I'm doing something wrong?
      Thanks in advance.
    • Tooltip Position
      By kristjan72

      I have just udated to 2.3.1, and now the tootlips which weren't working at all, are working, which is great. However, the positioning is not working. I have the following shortcode on the frontpage of my site.

      [pl_tooltip tip="Played by Mark Killeen" location="top"]banker [/pl_tooltip]

      but the tooltip still shows up to the right! Ironic, as the udate was all about fixing positioning. I'm very happy that the tooltip is working at all though!

      Question 2. Is there any way to style the link for a tooltips and popovers differently to other links, to make it differentiate between links that are clickable?


    • Tooltip position
      By natew
      I am using the bootstrap tooltip shortcode on my site and having trouble with the positioning in safari and google chrome...

      *If you hover over the icons you will see the tooltip...

      The issue does not appear in Firefox or IE - Does anyone know how to correct this issue? Any help would be appreciated.