Всплывающие подсказки UniTips
Добавляет нестандартные подсказки title со своим стилем и возможностью использовать HTML.
Скрипт (HTML-верх)
<!-- Подсказки UniTips, ForumD.ru 2023 -->
<script>
var uniTipTag = "a,img,div,td"; //HTML-теги, где будут работать подсказки
var uniTipClass = "tip"; //Классы, при наличии которых будут работать подсказки
var uniTipX = 0; //Сдвиг подсказки от курсора по оси X
var uniTipY = 15; //Сдвиг подсказки от курсора по оси Y
</script>
<script src="https://forumstatic.ru/files/001b/d8/6a/86224.js?v=2" type="text/javascript"></script>Стиль
Код:/* Подсказки */ #unitip {position: absolute; z-index: 10000; top: -1000px; color: #fff;display: none;} #unitippoint, #unitipmid, #unitipcap {position: relative; top: 0px; left: 0px; width: 230px; display: block;} #unitippoint {height: 19px; overflow: hidden;} #unitipmid {width: 210px; height: auto; padding: 5px 10px; min-height: 18px;} #unitipcap {width: 230px; height: 7px;overflow: hidden;} #ann-spec .notificat {line-height: 16px; margin-left: -174px; margin-top: 10px; max-width: 150px; min-width: 150px; padding: 10px; position: absolute; text-align: right;} #unitippoint {background: url(https://forumupload.ru/uploads/0007/e3/f7/2/24249.png) repeat;} #unitipmid {background: #080c15;} #unitipcap {background: #080c15;} #unitip img {margin: 0px; background: #080c15; padding: 10px 7px;}Пояснения
В отличие от скриптов, которые затрагивают любые подсказки типа title, этот действует нежнее - он добавляет подсказки со своим дизайном только там, где они уместны.
Ну и как бонус - в них работает HTML, то есть вы можете сделать всплывающие при наведении картинки, раскрасить как-то текст, изменить размер текста конкретной подсказки и т.д.Простой пример использования:
<a class="tip" title="Текст всплывающей подсказки">Текст ссылки</a>
Пример использования с HTML (пример со скриншота)
<div class="tip" title="<b>Шаблон для создания интерактивной карты (JS, CSS)</b><br><span style='font-size: 10px;'>28.04.23 19:33 - Automation Baby</span>">
<img src="картинка иконки">
</div>Зеленое - теги, где вы используете подсказки
они должны быть указаны в списке в настройках скрипта:
var uniTipTag = "a,img,div,td"; //HTML-теги, где будут работать подсказкиКрасное - класс, по которому работает подсказки
они должны быть указаны в списке в настройках скрипта:
var uniTipClass = "tip"; //Классы, при наличии которых будут работать подсказкиСинее - содержимое всплывающей подсказки в одну строчку.
ВНИМАНИЕ! обратите внимание, что при использовании HTML в title вы также НЕ должны использовать двойные кавычки, замените на одинарные:
<b>Шаблон для создания интерактивной карты (JS, CSS)</b><br><span style='font-size: 10px;'>28.04.23 19:33 - Automation Baby</span>
Всплывающие подсказки title со своим дизайном
Заменяет стандартные подсказки title на всплывающие блоки со своим стилем.
Скрипт:
старая версияСтиль:
- Подпись автора
Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.