Мобильная версияЯ использую dfn[title]:hover::after с содержимым: attr(title), чтобы показать большой собственный псевдоэлемент
проблема в том, что иногда эти позиционированные элементы появляются за пределами области просмотра. Это плохо, потому что пользователю приходится прокручивать их, чтобы прочитать. Вместо этого я хочу, чтобы всплывающие подсказки были ограничены областью просмотра. То есть каждая всплывающая подсказка должна располагаться так, как указано, но если она появится за пределами области просмотра, ее следует переместить так, чтобы она находилась внутри области просмотра.
У меня также есть эффект постепенного появления. используя переход CSS, как показано.
Код: Выделить всё
dfn[title] {
position: relative;
text-decoration: underline;
text-decoration-style: dotted;
}
dfn[title]::after {
opacity: 0.0000000001;
position: absolute;
bottom: 100%;
left: 100%;
padding: .5em .46em .5em .5em;
background-color: #444;
color: #F3F3F3;
font-size: smaller;
border-radius: .4em;
transition: opacity 0.3s ease-in;
content: attr(title);
z-index: -1;
}
abbr[title]:hover::after,
dfn[title]:hover::after {
z-index: 1;
opacity: 0.9999999;
}Код: Выделить всё
Tooltip
This rodent study showed that the A53T and A30P genetic mutations in α-synuclein have increased propensity to aggregate compared with the wild-type protein, and this strongly supports the direct and critical role of α-synuclein aggregation in the etiology of Parkinson’s disease. A30P
s[url=https://pubs.acs.org/doi/10.1021/bi010616g]Effect of Familial Parkinson's Disease Point Mutations A30P and A53T on the Structural Properties, Aggregation, and Fibrillation of Human α-Synuclein[/url],
Jie Li, et al.
Как добиться этого эффекта только с помощью CSS?Кроме того, в живом документе будет дополнительная структура из других элементов (SECTION, LI и т. д.), являющихся предками элементов DFN.
Подробнее здесь: https://stackoverflow.com/questions/786 ... e-viewport
