JSFiddle - React, Tailwind, and code Playground
HTML
<div class="kepek">
<div class="kep">
<img src="https://www.safer-turn.com/wp-content/uploads/2017/02/pexels-photo.jpeg" alt="Szöveg123">
<p class="tooltip">asd</p>
</div>
<div class="kep">
<img src="https://www.safer-turn.com/wp-content/uploads/2017/02/pexels-photo.jpeg" alt="Szöveg321">
<p class="tooltip">asd</p>
</div>
</div>
CSS
.kep {
background: #333;
padding: 10px
}
img {
width: 400px;
height: 400px;
}
.tooltip {
display:none;
color: #fff;
font-size: 12px Arial;
}
JavaScript
$('img').hover(
function() {
var tooltip = $(this).closest('.kep').children('.tooltip');
$(tooltip).text($(this).attr('alt'));
$(tooltip).fadeIn('slow');
},
function() {
var tooltip = $(this).closest('.kep').children('.tooltip');
$(tooltip).fadeOut('slow');
}
);