cancel
Showing results for 
Search instead for 
Did you mean: 

Show Full Product Name on Hover

Show Full Product Name on Hover

Here is what I am wanting to achieve:

 

Say I have a Product name that exceeds the limitations of what is set for category grid pages. This portion works properly, it shows the ellipsis for the overflow.

 

What I am wanting to do, is when someone hovers over the item, whether on the image/name/whatever, the full product name will show.

 

Utilizing Chrome's inspect tool, I have come close. Adding :hover & overflow: visible to .product-item-name gives the hover to the product's name, but nothing else and the overflow doesn't show in the center above the other items.

 

Any help is appreciated!

2 REPLIES 2

Re: Show Full Product Name on Hover

check this 

.catalog-category-view {
.products-grid {
    .product-item-info {
        box-shadow: 0px 1px 6px 2px rgba(0, 0, 0, 0.3);
        background: #f0f0f0;
        &:hover,
        &:active {
            box-shadow: none;
            border:0;
            padding:0;
            margin:0;
        }
        &:not(:hover):not(.active) {
            .product-item-inner {
                overflow: inherit;
                clip: auto;
            }
        }
    }
}

for full details go to this link

https://magento.stackexchange.com/questions/190653/category-grid-display-item-hover 

Re: Show Full Product Name on Hover