Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 19, 2021 at 5:25 pm #1329725
    julhobart

    Hi! Is it possible to add a tooltip to an image? I want it to behave like the icon tooltip but with an image instead of an icon. I tried the hotspot tooltip but that is not what I’m looking for, unless there is a way to remove the pulsating dot.

    Thanks!
    Jul

    November 20, 2021 at 2:29 am #1329757
    Nikko

    Hi Jul,

    There’s no option for that however you can use this workaround:
    1. Add a Code Block
    2. Add this code in the Code Block:

    <span class="av-icon-char" aria-hidden="true" data-avia-icon-tooltip="The Tooltip"></span>

    3. Replace The Tooltip to the Tooltip Text of your choice
    4. Replace the URL http://enfold.test/wp-content/uploads/2021/08/portfolio-large-1-300×150.jpg with the URL of your image
    5. Change the value of width and height, then save.
    Hope this helps.

    Best regards,
    Nikko

    November 21, 2021 at 2:24 am #1329817
    julhobart

    Fantastic Nikko, that worked! It is a bit “jumpy” though, any way to get the tool tip to not jump? Here’s my version on the FSA image: https://ade-medical.z4pby1v9-liquidwebsites.com/test/

    • This reply was modified 3 years, 1 month ago by julhobart.
    November 23, 2021 at 9:40 am #1330084
    Nikko

    Hi julhobart,

    You’re welcome. :)
    Can you try adding this CSS code in Enfold > General Styling > Quick CSS:

    .avia_codeblock span.av-icon-char {
    display: inline-block;
}

    Best regards,
    Nikko

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