[Resolved] Tooltip

[Stephanie]

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

Thanks

[Tom]

Hi there,

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

[Jean Paiva]

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/

Jean

[Stephanie]

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.

[Tom]

The instructions Jean gave above should be perfect.

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

[Stephanie]

http://www.optirocks.com

It’s the pink section.

Thanks Again

[Jean Paiva]

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.

[Stephanie]

Jean, that worked. Thanks Again!

[Rylan]

Hey Jean / Tom

Followed the exact steps you gave.

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

[Rylan]

http://solarsellmarketing.com

[Tom]

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' );

[Author]

Posts