function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
DANISH PEERZADADANISH PEERZADA 

how to display image on tool-tip hover

Hello All!
I've a requirement where I need to display an image whenever hover on its image name in lightning component.
I want to show image tooltip. 
For which I tried the following code:

<div style="padding-left:2rem;padding-top:5rem;position:relative">
    This is a kind of different phenomena as 
        <a href="{!$Resource.HoverTooltip}" class="slds-popover__body">Help Text</a>
        is required
        <img url="https://www.theverge.com/2019/4/22/18511375/earth-day-google-doodle-wildlife-diversity"  />
        <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left" role="tooltip" id="help" style="position:absolute;top:-4px;left:35px">
        <div class="slds-popover__body" content="{!$Resource.HoverTooltip}">{!$Resource.HoverTooltip}</div>
        </div>
</div>

And this doesn't works properly.
Any kind of help is welcome.
Thanks in advance!
Deepak_KumarDeepak_Kumar

Hi Danish,

Try the code below.
 

// HTML:

 <div class="popover__wrapper">
            <h2 class="popover__title">Hover:me</h2>
            <div class="popover__content">
                <img alt="Jimg" src="https://media.giphy.com/media/11SIBu3s72Co8w/giphy.gif" />
            </div>
        </div>


// CSS 


.THIS .popover__wrapper {
    position: relative;
}
.THIS .popover__content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transform: translate(0, 10px);
    background-color: #514b4b;
    padding: 1rem;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    width: auto;
}
.THIS .popover__content:before {
    position: absolute;
    z-index: -1;
    content: "";
    right: calc(100% - 40px);
    top: -8px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #514b4b transparent;
    transition-duration: 0.3s;
    transition-property: transform;
}
.THIS  .popover__wrapper:hover .popover__content {
    z-index: 10;
    opacity: 1;
    visibility: visible;
    transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

Please mark this as best answer if it solves your problem.

Thanks.