Work Text:
У звичайному редакторі на АО3 дозволяється тільки обмежена кількість тегів HTML і забороняється використання CSS взагалі.
Утім, сам сайт дозволяє створювати власні оболонки робіт (work skins), де ви можете вписати будь-який CSS, щоби оформити свою роботу, як тільки забажаєте. Це відкриває дуже широкі можливості для тих, хто володіє базовими знаннями CSS, але тут я зосереджуся на одній темі.
У твітері спитали, як можна зробити підказку, яка нагадує вбудовані підказки AO3 зі знаком питання.
Ось приклад рішення, яке я перенесла з базового туторіала W3Schools, додавши до нього знак питання.
Я підказка
?
Текст підказки
Я підказка з довгим текстом
?
Текст підказкиТекст підказкиТекст підказкиТекст підказкиТекст підказкиТекст підказкиТекст підказкиТекст підказкиТекст підказкиТекст підказки
Я підказка зі стрілочкою
?
Текст підказки
Наведіть мишку на знак питання, якщо ви на комп'ютері, або клацніть на нього, якщо ви на мобільному пристрої, — і ви побачите текст підказки.
Інструкція покроково
1. Створіть нову оболонку роботи (work skin), перейшовши за цим посиланням. Тип/Type: Work Skin. Назва/Title: Ваша назва.
2. У полі CSS введіть наступний текст і збережіть оболонку.
#workskin .tooltip {
position: relative;
display: inline-block;
cursor: help;
}
#workskin .tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
#workskin .tooltip:hover .tooltiptext {
visibility: visible;
}
Якщо потрібна підказка зі стрілочкою, додайте ще це:
#workskin .tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}Після збереження ви побачите приблизно таке:
3. Перейдіть до редагування свого фанфіка. У полі Select Work Skin оберіть оболонку, яку ви створили.
4. Далі в тому місці, де потрібна підказка, вставте наступний код. Зверніть увагу, що вставляти код потрібно в режимі редактора HTML.
<p>Я підказка <span class="tooltip"> <span class="symbol question"><span>?</span></span> <span class="tooltiptext">Текст підказки</span> </span></p>
Замініть текст на той, який вам необхідний, — і все, готово!