css/html formated text over image on mouseover

Question

I have a working example, but I want to format the text which is shown when the image gets hovered. Here is the code:

 .ecommerce-categories [class^=col-] > a:before { content: attr(data-text); position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 50px 20px; color: #fff; word-wrap: break-word; overflow: hidden; background-color: rgba(0,0,0,0.4); opacity: 0; -webkit-transition: all .7s ease; transition: all .7s ease; } .ecommerce-categories [class^=col-] > a:hover:before { opacity: 1; } 

 <div class="col-lg-4 categories"> <a href="#" data-text="Day for rafting and outdoor activities" style="background: url('images/catagories/cat-rafting.jpg') no-repeat center center; background-size: cover;" > 

I want to be able to edit the text inside the attribute 'data-text' with html tags. How should I refactor this code so I can do that? (data-text="Day for rafting and outdoor activities").

Thank you.

Answer 1

Per the spec HTML added in the CSS content attribute does not alter the document tree. So in your case you can't format a part of the text contained in data-text .

To do so you can make use of javascript. There is a ton of javascript tooltip plugins / libraries / code examples available on the internet.