Add Tooltip to Image

Support
#1

I found posts that allow me to add tooltip to the element classic image - I need to add to an image.
my row has 2 columns with image - headline - text

on each image I need a tooltip that will open their bio page.
How can I do this?

#2

Hi @LucyKeile,

Thank you for writing in, you need to use the Image shortcode, if you want the image to have a tooltip. That means you need to delete your Image element and replace that with Content Area element where you can paste your Image shortcode.

example:
[image type="thumbnail" src="YOUR-IMAGE-URL-HERE" link="true" href="#example" info="tooltip" info_place="right" info_trigger="hover" title="Hey There!" alt="Text"]

Hope it helps,
Cheers!

#3

I had posted before something about this page and I can NOT find the post do you know why? Your coworkers helped me accomplish the look I have on this page, which you can see if you are able to log in.

#4

Hello @LucyKeile,

To accomplish what you want, you will have to reconstruct the page.

1.) The image element needs to be removed
2.) It will be replaced with a content area so that you can insert an image shortcode.
3.) You may use this custom shortcode:

[image style="margin:0 auto; padding: 0; border: none;" type="thumbnail" src="https://mohneytwins.com/hellman/wp-content/uploads/2020/03/Hellman-Lober_StephenHellman_BW.jpg" link="true" href="https://mohneytwins.com/hellman/stephen-hellman/" info="popover" info_place="top" info_trigger="hover" info_content="Stephen Hellman graduated from Santa Barbara College with an Associate of Arts degree. Technical memberships include American Society of Heating, Refrigeration and Air Conditioning Engineers (ASHRAE), American Society of Plumbing Engineers (ASPE), and National Fire Protection Associates (NFPA)" title="Stephen Hellman" alt="Stephen Hellman"]

I have edited the first image for you to take a look as an example.

#5

@ruenel I see what you have done - the tooltip works but I lost the other functionality (color image appears when hoovering)

Would it be possible to have both?

When you hover on the image the tooltip display but also the other color image? Could that be written on this shortcode?

#6

Hello @LucyKeile,

Thanks for updating in! To be able to have the color image display again, you will need to use this custom css in the Custom CSS:

.x-img-link:hover {
    background-color: transparent;
}

.x-img-link:hover img {
    opacity: 0;
}

Please check the page now.

#7

Thank you! You are SUPERB!!! I have updated the others.

Question: I hid the old image element just like you did. Should that stay there or should I delete that since we aren’t using any longer?

#8

Hey @LucyKeile,

Since you’re not using the old images then you can simply delete them otherwise it will make your page heavy and effect the loading time.

Glad we could help. Cheers!

#9

Thank you! I’ve deleted the images and will delete any other elements I am not using.

:slight_smile:

#10

You’re welcome @LucyKeile!
We’re just glad we were able to help you out.

#11

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