Jump to content


Photo
- - - - -

tooltip customizations

tooltip

Best Answer Danny , 24 January 2013 - 01:50 PM

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 {
background:green;
}
#site .popover .popover-title {
background:green;
}

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.

 

http://www.pagelines.com/pros/

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 evert100

evert100

    Super Member

  • Members
  • 156 posts
  • Framework Version:2.3.8.
  • Country: Country Flag

Posted 24 January 2013 - 11:02 AM

Hi,

 

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:

Please Login or Register to see this Hidden Content



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16247 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 January 2013 - 11:44 AM

HI,

 

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 - 

Please Login or Register to see this Hidden Content

 

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?"



#3 evert100

evert100

    Super Member

  • Members
  • 156 posts
  • Framework Version:2.3.8.
  • Country: Country Flag

Posted 24 January 2013 - 12:26 PM

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.



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16247 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 January 2013 - 01:50 PM   Best Answer

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,

 

Please Login or Register to see this Hidden Content

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.

 

Please Login or Register to see this Hidden Content



#5 evert100

evert100

    Super Member

  • Members
  • 156 posts
  • Framework Version:2.3.8.
  • Country: Country Flag

Posted 24 January 2013 - 03:28 PM

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.

 

Thanks.



#6 evert100

evert100

    Super Member

  • Members
  • 156 posts
  • Framework Version:2.3.8.
  • Country: Country Flag

Posted 24 January 2013 - 03:29 PM

url here

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: tooltip