[Support request] Various issues with tooltip

[Ioannis]

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.

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.

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.

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.

[David]

Hi there,

can you provide the URL to the page ?

[Ioannis]

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

Please check the private information.

[David]

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

[Ioannis]

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?

[David]

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.

[Ioannis]

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).

[David]

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

[Ioannis]

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!

[David]

Let us know 🙂

[Author]

Posts