0

I have one cshtml file and I am working in nocommerce. I am using data-content to display content when any one hover on product.

For simple text it is working fine but for HTML tags also it is displaying like simple text and not applying HTML, please check image and code below for more detail.

<div data-html="true" data-content="<div><b>Test</b> </div>" class="product-item" data-productid="@Model.Id">

Also I have applied css for this as below :

.product-item:after {
    content: attr(data-content);
    color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.product-item:hover:after {
    opacity: 1;
}

With html it is displaying with HTML tag, so need help to solve this?

See the image for more detail. Check product detail block, I hover on it.

cfnerd
  • 3,658
  • 12
  • 32
  • 44
PMS Admin
  • 83
  • 1
  • 1
  • 8
  • content doesn't support HTML, only text. You should probably use jQuery or something like that. see https://stackoverflow.com/questions/5865937/using-before-and-after-css-selector-to-insert-html – Tamil Selvan C Feb 02 '18 at 13:04
  • @TamilSelvanC if content does not support HTML then in this below link how it is supported ? http://jsfiddle.net/qy9Az/2760/ – PMS Admin Feb 02 '18 at 13:08
  • they achieve the result through javascript. copy the content from data-* and append it in the div and show the popup – Tamil Selvan C Feb 02 '18 at 13:13

0 Answers0