Добавление всплывающего title к фотографии

Первая фотография имеет 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>

Моды для Wfolio.ru

Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Изменение цвета кнопок на отдельной странице

Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Скрываем блок от Инстаграм

Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Добавлние кнопок к форме обратной связи

Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Виджет обратного отсчета

Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Меняем светлую тему на темную (или любую другую)

Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Запрет индексации отдельной страницы

Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Скрытие пунктов меню в зависимости от языка сайта

Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Генератор случайных цифр

Виджет генератора случайных чисел. — задается диопазон «от» и «до»; — старт в один клик; — перебор других значений...
Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Виджет. Кнопка сохранения контактов

Данный виджет генерирует vCard — электронную визитку и её QR-код. Визитка поддерживает: — ФИО, — род...
Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Модицикация: выделение заголовка другим цветом

Иногда бывает необходимо выделить один или несколько заголовков другим цветом.
Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Модификация пакетов услуг

Модификация блока с ценами на пакеты услуг с помощью CSS/JS: — выравнивание высоты блоков с пакетами услуг в версии...
Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Модификация мультиссылок (taplink)

Модификация страницы с мультиссылкой с помощью CSS: — изменение отступов между кнопками; — изменение размера текста...
Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Удаление сообщения о Cookie на отдельной странице

Если вы включили Cookie на сайте (Настройки — Разные настройки — Уведомление об использовании cookie (GDPR)),...
Добавление всплывающего title к фотографии. Фотограф Константин Шамин

Калькулятор цен

Возможность формировать цену заказа с учетом добавления дополнительных услуг.