- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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!
Solved! Go to Solution.
Accepted Solutions
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I did end up finding a solution to this so figured I should probably provide said solution and mark this as solved
.product-item-info:hover > .product-item-details > .product-item-name { text-overflow: revert; overflow: revert; white-space: revert; }
This css code worked for me
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: Show Full Product Name on Hover
you can follow this link
https://www.magemonkeys.com/add-hover-image-in-a-product-to-display-on-listing-page-magento-2/
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I did end up finding a solution to this so figured I should probably provide said solution and mark this as solved
.product-item-info:hover > .product-item-details > .product-item-name { text-overflow: revert; overflow: revert; white-space: revert; }
This css code worked for me