HIde image titles on hover in Safari

  • Hi folks. I am trying to hide or otherwise not render the image title on hover. I have done the following few things and frankly not even sure what is doing what but none of this appears to work on Safari.

    #JS#

    jQuery(‘.envira-gallery-item img’).on(‘mouseenter’, function() {
    jQuery(this).data(‘title’, jQuery(this).attr(‘title’));
    jQuery(this).attr(‘title’, ”);
    }).on(‘mouseleave’, function() {
    jQuery(this).attr(‘title’, jQuery(this).data(‘title’));
    });

    ##I started with this##

    jQuery(‘.envira-gallery-item img’).hover(function() {

    jQuery(this).data(‘title’, jQuery(this).attr(‘title’));

    jQuery(this).attr(‘title’, ”);

    }, function() {

    jQuery(this).attr(‘title’, jQuery(this).data(‘title’));

    });

    ##CSS##

    .envira-gallery-item img[title] {
    pointer-events: none;
    }
    .envira-gallery-item img[title]::after {
    content: attr(title);
    visibility: hidden;
    opacity: 0;
    }

    Any ideas?



    • This topic was modified 1 year, 2 months ago by nigel-lew.
Viewing 1 replies (of 1 total)

  • Hi @nigel-lew,

    You should be able to hide the tooltips on hover using a JS snippet like the one from below:

    var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(".envira-gallery-item a img").mouseenter(function() {
var title = $j(this).attr("title");
$j(this).attr("save_title", title);
$j(this).attr("title", "");
})
.mouseleave(function() {
var title = $j(this).attr("save_title");
$j(this).attr("title", title);
})
.click(function() {
var title = $j(this).attr("save_title");
$j(this).attr("title", title);
});
});

    Hope this helps!

    • This reply was modified 1 year, 1 month ago by Mihai Ceban.
Viewing 1 replies (of 1 total)
  • The topic ‘HIde image titles on hover in Safari’ is closed to new replies.