[Support request] Various issues with tooltip

Home Forums Support [Support request] Various issues with tooltip

Home Forums Support Various issues with tooltip

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2328103
    ik

    Hello,

    Don’t know whether this is a theme issue or a Blocks issue but we have pro versions for both.

    We are having some issues with the tooltip.

    1) Both on desktop and on mobile, it shows the tooltip content way off where it needs to be. Also, the downwards arrow of the tooltip sometimes gets misplaced and instead of being above the heading (the case where we mostly see it), it stays right in the middle of the heading which is lower than where it should be. Please check the images to see what’s happening. We took the screenshots from a full screen window.

    tooltip content way off position

    For instance, if you hover over “2 x 512 GB NVMe SSD”, you will see that the tooltip is getting lower than it should.

    Ideally the tooltip should appear directly above the content.

    tooltip content way off position

    2) Even if we have add a z-index of 10,000 , the tooltip still doesn’t appear above other content and it gets hidden. Please also check the image below. In addition to that, if the content of the tooltip is large enough, it gets hidden from the above element.

    Content hidden, opacity not high enough

    3) We also tried to make the tooltip’s opacity as high as possible in order to completely hide the content behind it but we were unable to maximize. You can see from the image above that the content behind the tooltip is still visible.

    What do you suggest here?

    The page from which we took the pictures is still being edited so in order to avoid any unwanted crawls from the engines, we have made it password protected. The password can be found in the private information area.

    Kindest regards.

    #2328181
    David
    Staff
    Customer Support

    Hi there,

    can you provide the URL to the page ?

    #2328187
    ik

    Knew i had forgotten something… Sorry for the trouble caused.

    Please check the private information.

    #2328247
    David
    Staff
    Customer Support

    How were those tooltips added ? Is it a custom solution with CSS?

    #2328278
    ik

    While we did add CSS trying to fix the z-index and the opacity issues, we are using the tooltip the theme provides as you showed us in a previous ticket regarding the tooltip editing.

    We select a heading and then we go Advanced -> Custom attributes -> on the left we write “data-tooltip” and on the right we write the content we want.

    Would you like access to check it yourself?

    #2328288
    David
    Staff
    Customer Support

    The Theme doesn’t add those.
    They are 100% custom CSS, is it possible you can disable the cache/optimization plugin so i can see where the CSS is being loaded from. I can then advise on what needs changing.

    #2328349
    ik

    Done deactivated caching.

    If it’s not the theme, then is it the Generate Blocks? Cause i can’t seem to find any other plugins would give these abilities and also our other websites (which don’t use Generate Press or Blocks yet) don’t have the ability mentioned in the previous post (Custom attributes).

    #2328512
    David
    Staff
    Customer Support

    GenerateBlocks Pro provides the Custom Attributes, but all it does is outpt a custom attribute in the blocks HTML. Thats all it does, nothing else, and simply adding an attribute would not display a Tooltip like the one you have.

    Your Tooltips are created by this custom CSS you have in the Customizer > Additional CSS ( and some other CSS not listed below ):

    
    [data-tooltip]:before {
        position: absolute;
        bottom: 60%;
        left: 25%;
        margin-bottom: 15px;
        margin-left: -80px;
        padding: 7px;
        width: 380px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color: #000;
        background-color: hsla(0, 0%, 20%, 0.9);
        color: #fff;
        content: attr(data-tooltip);
        text-align: center;
        font-size: 14px;
        line-height: 1.4;
        letter-spacing: 2px;
    }
    
    [data-tooltip]:after {
        position: absolute;
        bottom: 74%;
        left: 50%;
        margin-left: -5px;
        width: 0;
        border-top: 5px solid #000;
        border-top: 5px solid hsla(0, 0%, 20%, 0.9);
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        content: " ";
        font-size: 0;
        line-height: 0;
    }
    
    @media (max-width: 992px) {
        .gb-grid-wrapper-overflow {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
        }
    
        [data-tooltip]:before {
            position: absolute;
            bottom: 60%;
            left: 25%;
            margin-bottom: 15px;
            margin-left: -80px;
            padding: 7px;
            width: 300px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            background-color: #000;
            background-color: hsla(0, 0%, 20%, 0.9);
            color: #fff;
            content: attr(data-tooltip);
            text-align: center;
            font-size: 14px;
            line-height: 1.4;
            letter-spacing: 2px;
        }
    
        [data-tooltip]:after {
            position: absolute;
            bottom: 74%;
            left: 50%;
            margin-left: -5px;
            width: 0;
            border-top: 5px solid #000;
            border-top: 5px solid hsla(0, 0%, 20%, 0.9);
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            content: " ";
            font-size: 0;
            line-height: 0;
        }
    }

    And its that CSS that needs correcting.
    Do you know where that CSS came from ? As it may be easier if the provider fixed it

    #2328734
    ik

    Didn’t even remember that we had placed it there… And we even looked at it…

    Have no clue where we found this CSS but you’ve given us a great head start so we’ll grab from it to try to fix the issues.

    Will let you know if we find an obstacle.

    Thank you very much!

    #2329098
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.