Viewing 12 replies - 1 through 12 (of 12 total)
  • 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.

    Thread Starter nebadita

    (@nebadita)

    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.

    Thread Starter nebadita

    (@nebadita)

    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.

    Thread Starter nebadita

    (@nebadita)

    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

    Thread Starter nebadita

    (@nebadita)

    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?

    ying

    (@yingscarlett)

    Hi there,

    Try adding this CSS to position the popup:

    .author-popup {
    top: 100%;
    }

    Thread Starter nebadita

    (@nebadita)

    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?

    ying

    (@yingscarlett)

    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;
    }

    Thread Starter nebadita

    (@nebadita)

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

    ying

    (@yingscarlett)

    You are welcome ? ??

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Need tooltip activation for mobile’ is closed to new replies.