Hide Title Attribute tooltip on product images

Solved
waterjacket
New Member
2 0 0

Hello.  I am trying to hide altogether the title attribute that is displaying as a tool tip on product images on the home page.  This occurs on hover.

The site is:

https://saltcalifornia.com/

Built using flow (wetheme)

 

This page shows a fiddle that looks to be exactly what I need?  I have added this to the theme.liquid with no success.

http://jsfiddle.net/2nHxV/

 

<script>
$('a').hover(function(e){

    $(this).attr('data-title', $(this).attr('title'));
    $(this).removeAttr('title');
    
},
function(e){

    $(this).attr('title', $(this).attr('data-title'));
    
});

</script>

 

0 Likes

This is an accepted solution.

It's not happening because of CSS/JS, it's a feature of the browser. Just remove the "title" attribute in your anchor tag. Right now, it looks something like this:

<a href="/collections/all/products/ann" title="ANN" class="grid__image grid__image__match">...</a>

 

Delete the title="ANN" part of your code. That should work. 

Just helping folks learn Shopify theme development - universitheme.com
0 Likes
waterjacket
New Member
2 0 0

Thank you!  I had tried something similar but needed to just a different liquid file.  This is what the original line looked like in the liquid file.  I removed the highlighted section and the product title is not showing now as a tooltip.

 

I believe this is removing essentially exactly what you suggested.

 

<a href="{{ product.url | within: collection }}" title="{{product.title}}" class="grid__image grid__image__match">

0 Likes