Help adding tooltip to image

Support
#1

Searched for articles relating to this and all are old and the links in them no longer work.

Can you help me with adding tooltips to images and buttons please

Thanks

#2

Hi Matthew,

Here’s the guide for tooltip. You can add and image shortcode and then wrap it with tooltip shortcode inside content area element. Something like this:

 [extra href="#example" title="Yeah, tooltip time!" info="tooltip" info_place="top" info_trigger="hover"] [image type="rounded" src="image-url.jpg" alt="Text"] [/extra]

Hope this helps.

#3

Hi, yes I read that but I couldn’t find anywhere that said where to actually place the code?

Thanks

#4

Hi Matthew,

On you’re Cornerstone editor, add a section and then use Content Area element:

Hope this helps.

#5

Right OK. I thought I could add a tooltip to an image element. But you are saying I have to add a content element and then wrap the image in that?

Not the cleanest way of doing it

How do you change the text colour, Title box colour etc?

Thanks

#6

Hey Matthew,

Yes, that is possible too using the Classic Image element. You can enable the Info option of the element and set the text for the popover.

To change the look of the tooltip, you will have to add some css to X > Theme Options > CSS:

.tooltip.top .tooltip-arrow {
    border-top-color: #ccc;
}

.tooltip-inner {
    background-color: #ccc;
    color: #000;
}

Hope this helps.

#7

Thanks for all your help

#8

You are most welcome. :slight_smile:

#9

Hi,

Tried adding this to CSS section and no change to the tooltip

}
.tooltip.top .tooltip-arrow {
border-top-color: #FFD700;
}

.tooltip-inner {
background-color: #FFD700;
color: #FFD700;
}

Thanks

#10

Hello Matthew,

To resolve your issue, please make use of this custom css code instead:

.tooltip.top .tooltip-arrow,
.popover.top .arrow {
    border-top-color: #FFD700;
}

.tooltip.top .tooltip-title,
.popover.top .popover-title {
    background-color: #FFD700;
    color: #000;
}

.tooltip-inner,
.popover-content {
    background-color: #FFD700;
    color: black;
}

We would love to know if this has worked for you. Thank you.

#11

Yes that did it! Many thanks

Assume these settings will remain even after theme updates etc?

Thanks
Matt

#12

Hey Matt,

Yes, all the codes you have added in the Global CSS should remain as is even after updating your theme but it is strongly recommended to take a full backup of your site before doing any update just in case you’ll need it.

Hope this helps.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.