Need tooltip activation for mobile

Hi @nebadita,

I believe you’ll need a third-party plugin or custom code for this.

Can you provide the link to the site in question? We’ll try to check why it’s not appearing.

Hi,
Please check the below link.

https://freaktofit.com/important-things-to-observe-in-aerobic-exercise/
Hover on the author, you will see.
It is okay for desktop but not displaying on mobile

Hi there,

your custom tooltip solution uses the following CSS:

@media (min-width: 1025px) {
    .author-popup {
        width: 410px;
        position: absolute;
        display:none
    }

    .author-link:hover ~ .author-popup {
        display:block
    }

    .author-popup:hover {
        display:block
    }
}

The hover event is inside a @media (min-width: 1025px) { so it only works on devices over 1025px. The author of that CSS probably did that, as you CANNOT hover on a touch device and if you tap the link it may open the tooltip and block the users screen …. which is terrible.

You can either move the CSS outside of @media (min-width: 1025px) {.......} so it is applied everywhere, and see how mobile handles it.

Or perhaps you want to ask the author of that code, as we are here to provide support for the GP Theme, not custom development.

Thanks @diggeddy
It worked like a charm. Thanks for your help. I just need to do little bit customization. But now its working on mobile too.

Thanks?@diggeddy
It worked like a charm. Thanks for your help. I just need to do little bit customization. But now its working on mobile too.

You’re welcome

Hi @diggeddy
I need one more help from you.
The tooltip is now working fine. But the position is not correct which I am looking for.
I want that tooltip should display below the hover like this for both desktp and mobile
https://prnt.sc/-tuKAqhI-5ad

and should display author image too inside the tooltip. But however its not working properly. Can you please help me with that?

Hi there,

Try adding this CSS to position the popup:

.author-popup {
top: 100%;
}

thanks @yingscarlett

it really helped. However can you please let me know how can i point the hover box by arrow? You can check from the above screenshot. A small arrow is there.. how can i do that?

Try this CSS:

.author-popup:before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: #fff;
border-top: 1px solid;
border-left: 1px solid;
z-index: 3;
top: -6px;
transform: rotate(45deg);
left: 50px;
}

Thank you so much @yingscarlett
You solved my exact problem.

You are welcome ? ??