[Resolved] Tooltip

Home Forums Support Tooltip

  • This topic has 10 replies, 4 voices, and was last updated 5 years ago by Tom.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #129592

    Hi Tom,
    Can you tell me how to create the tooltip background you have in section 2 of Generate Press.


    Lead Developer
    Lead Developer

    Hi there,

    Not too sure what you mean? Could you take a screenshot possibly?


    Hey Stephanie, for the tooltip you will need a custom css class and a tooltip image.

    For the tooltip here in GP site the css used is this:

    .home-info-section {
    	background-image: url('URL TO YOUR ARROW IMAGE')!important;
    	background-repeat: no-repeat;
    	background-position: center top;
    	background-size: auto;

    Just place home-info-section into your section CUSTOM CLASSES, upload the image to your site and change the URL in the code above.

    To add CSS follow this tutorial: https://generatepress.com/knowledgebase/adding-css/



    Hi Tom,

    The section that says:

    Responsive, Multipurpose WordPress Theme

    GeneratePress is lightweight, powerful and easy to use!

    I place the photo in my section background but the bottom point is not showing.I also used the instruction that Jean give, that still did not work. I am missing something not sure what.

    Jean thanks for your help.

    Lead Developer
    Lead Developer

    The instructions Jean gave above should be perfect.

    Any chance you can link us to the page so we can inspect the code?



    It’s the pink section.

    Thanks Again


    As I can see you want to display the tooltip in the section below. Your image should be just uploaded to your media library, not as section background.

    Also your image must be only the tooltip like this:

    And you need to add the custom class home-info-section to your 4th section. Hope that now is more clearly the steps.


    Jean, that worked. Thanks Again!


    Hey Jean / Tom

    Followed the exact steps you gave.

    Can you see why the arrow isn’t coming up for me?

    Lead Developer
    Lead Developer

    Your CSS is:

    background-image: http://solarsellmarketing.com/wp-content/uploads/2016/02/Solar-Marketing-Tips.png!important;

    It should be:

    background-image: url( 'http://solarsellmarketing.com/wp-content/uploads/2016/02/Solar-Marketing-Tips.png' );

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.