Как вставить интерактивную ссылку?
Вы можете создавать интерактивные ссылки в Dr.Explain. Например, добавить всплывающую подсказку, которая будет показываться при наведении курсора мыши на ссылку.
Для вставки соответствующего кода используйте один из описанных ниже способов:
-
Нажмите кнопку
на панели инструментов редактора. -
Нажмите стрелку вниз рядом с кнопкой
на панели инструментов редактора и выберите HTML... из выпадающего меню. -
Воспользуйтесь комбинацией горячих клавиш Ctrl+Shift+S.
Откроется окно HTML-фрагмент, в которое нужно вставить код, например, такой:
.tooltip-link {
position: relative;
cursor: help;
}
.tooltip-link a {
color: #0066cc;
}
.tooltip-link::after {
content: attr(data-tooltip);
position: absolute;
bottom: 130%;
left: 50%;
transform: translateX(-50%);
background: #1d1d1f;
color: #ffffff;
padding: 6px 10px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease;
z-index: 10;
}
.tooltip-link:hover::after {
opacity: 1;
visibility: visible;
}
<p>Пример <span class="tooltip-link" data-tooltip="Текст подсказки"><a href="#">интерактивной ссылки</a></span>, созданной с помощью HTML и CSS.</p>
Пример интерактивной ссылки, созданной с помощью HTML и CSS.
С помощью HTML, CSS и JavaScript вы можете создавать анимации, нестандартные элементы и добавлять в контент сторонние виджеты. Подробнее в разделе Вставка HTML-кода. Смотрите также Вставка якоря и Вставка перекрестных ссылок.