Первая фотография имеет title, вторая — нет
Как это сделано
1. перейти в редактирование ALT-текстов
2. К фотографии, к которой хотите добавить title надо его дописать в alt, заключив в парные вертикальные черточки «||»
Далее добавляем на страницу код:
<script>
$(document).ready(function () {
$.each($("img"), function(){
var result = $(this).attr("alt").split('||');
if (result.length>1) {
$(this).attr("title", result[1]);
$(this).attr("alt", result[0]);
}
})
$("img").on("mouseover touchstart",function(event){
if ($(this).attr("title")) {
if ($(this).hasClass('tooltip_show')) {
$(this).attr("title", Title)
Title="";
$(".tooltip").remove();
$(this).removeClass('tooltip_show');
} else {
$(".tooltip").remove();
Title=$(this).attr("title");
let tooltip=$("<div/>",{class:"tooltip",html:Title});
$(this).parent().parent().append(tooltip);
$(this).parent().parent().find(".tooltip").fadeIn();
$(this).addClass('tooltip_show');
}
}
});
$("img").on("mouseleave",function(event){
$(this).attr("title", Title)
Title="";
$(".tooltip").remove();
$(this).removeClass('tooltip_show');
});
});
</script>
<style>
.tooltip{
position: absolute;
background-color:#000;
color:#fff;
padding:5px;
display:none;
pointer-events: none;
width: 100%;
line-height: 2.5em;
min-height: 50px;
bottom: 0px;
z-index: 999;
}
</style>
