Remove tooltip when hovering over gallery images

[simondrydesign]

When hovering over a gallery image, the caption displays in semi-transparant text over the image which looks great. But then a tooltip appears by the pointer with the same text in a grey box to the side. This looks really poor and I have had clients complain about it. Is there any way using css to disable the tooltip?

[Adam7]

I believe that is styled by the browser, so it probably won't be found in your site's CSS. You can still override whatever the browser uses, though:

https://codepen.io/shimdim/pen/NjyNNb

[simondrydesign]

Many thanks for your reply Adam.

In terms of overriding the browser, would the data title for the tooltip be .galleryCaptionHover or something else?

Kind regards

Simon

[Bernadette3]

Hey there! Adam will be back in a couple of days but I'll make sure to forward your message on to him. Thanks! 

[simondrydesign]

Thanks Bernadette, I look forward to getting a reply from Adam.

[Bernadette3]

You're welcome! This past week was pretty busy but I'm sure you'll hear from him soon.  

[simondrydesign]

Hi Bernadette - it's been a month now and I've heard nothing - please could you or Adam reply with an answer?

Many thanks

Simon

[Adam7]

Can you provide the URL of a page that has a gallery on it, @simondrydesign? I think it would help our Community members to see a live gallery.

[simondrydesign]

Yes of course Adam, please see https://www.southmedburn.co.uk/facilities.html

[BJ5]

Something like this will do it:

<style>
    .w-fancybox:hover {
        position: relative !important;
    }

    .w-fancybox[title]:hover:after {
         content: attr(title) !important;
         padding: 4px 8px !important;
         position: absolute !important;
         left: 0 !important;
         top: 100% !important;
         white-space: nowrap !important;
         z-index: 20 !important;
         background:red !important;
    }
</style>

That just makes it have a red background, so I'd edit that or add other style rules to make it look how you want.

[simondrydesign]

Hi BJ

Many thanks, but I tried adding that code and it caused the caption to stop showing altogether!

I already have some fancybox css (see below) in this theme which I suspect is conflicting with your code.

.fancybox-skin {
background: transparent !important;
box-shadow: none !important;
}

.fancybox-title {
.caption-style;
padding: 10px;
font-weight: normal;
line-height: normal;
text-align: center;
background-color: #fff;
}

.fancybox-close,
.fancybox-next span,
.fancybox-prev span {
background: none !important;
width: auto;
height: auto;
text-decoration: none;
}

.fancybox-close:before,
.fancybox-next span:before,
.fancybox-prev span:before {
color: #ffffff !important;
font-size: 50px;
font-weight: normal;
line-height: 0.5em;
.transition(all 300ms ease);
}

.fancybox-close:hover:before,
.fancybox-next:hover span:before,
.fancybox-prev:hover span:before {
color: #b9b9b9 !important;
}

.fancybox-prev span:before {
content: '\3008';
}

.fancybox-next span:before {
content: '\3009';
}

.fancybox-close {
top: 20px;
right: 20px;
}

.fancybox-close:before {
content: '\00D7';
}

Any ideas how that could be tweaked to remove the tooltip?

Kind regards

Simon

[simondrydesign]

The answer has been found!

Go to Settings > SEO > Footer Code and add

<script>
var imgTitle = document.querySelectorAll('.galleryInnerImageHolder a');

for( var i = 0; i < imgTitle.length; i++){
imgTitle[i].removeAttribute('title');
}
</script>

Save then publish. It works!

[Adam7]

Thanks for sharing, @sinmondrydesign!

[simondrydesign]

Hi Adam/Bernadette

Are any of you Weebly guys going to get back to me on this issue? It's been a while now and I need to be able to solve this please!

Many thanks

Simon

[BJ5]

I don't see anything immediately obvious that should conflict so it could just be a problem with my code. You might need to talk with a web developer with this one, or try a place like stackoverflow.com.