Очередной конструктор. Предназначен для вывода небольшой пояснительной информации сверху экрана при наведении на слово, которое требует пояснения. в текстах часто используются сноски, но это не всегда удобно. Такой вывод информации имеет свои плюсы.
(для проверки наведите курсор мыши на слова, выделенные зелёным цветом)
на потолке висела
осветительный прибор в красивом исполнениилюстра и, переливаясь в лучах света, создавала небесную красоту помещения...
пары кружились по дубовому деревянный пол, собранный из отдельных "плашек".
плашки - досочки определённого размера, собранные вместе.паркету и не замечали ничего вокруг...
пары кружились по дубовому деревянный пол, собранный из отдельных "плашек".
плашки - досочки определённого размера, собранные вместе.паркету и не замечали ничего вокруг...
Кого заинтересовало сие творение, смотрим установку:
Использование BBCode
Код: Выделить всё
[tip={TEXT1}]{TEXT2}[/tip]
Замена HTML
Код: Выделить всё
<style>
a.help {text-decoration: none;color: green;}
a.help span {display: none;}
a.help:hover span {position: fixed;display: block;right: 0px;left: 0px;top: 0px;margin:auto;width:400px;border-bottom: solid 1px #FFFFFF;border-radius: 0 0 5px 5px;background: #FFF8DC;color: #6495ED;text-align:center;padding: 10px;z-index:5000;}
</style>
<a href="#" class="help"><span>{TEXT2}</span>{TEXT1}</a>
Подсказка
Код: Выделить всё
[tip=название]пояснение[/tip]
как легко понять, этот код
Код: Выделить всё
position: fixed;display: block;right: 0px;left: 0px;top: 0px;margin:auto;width:400px;border-bottom: solid 1px #FFFFFF;border-radius: 0 0 5px 5px;background: #FFF8DC;color: #6495ED;text-align:center;padding: 10px;
и есть вывод пояснения, зафиксированного в верху страницы. ширина 400, расположение - по центру.
в работе над bbcode использованы материалы о выводе подсказки для ссылки: https://myrusakov.ru/sozdanie-vsplyvaus ... kazki.html