Минимальный (самый короткий) HTML для кликабельного текста или спойлера «показывать-скрывать» - PullRequest
Новая
       19

Минимальный (самый короткий) HTML для кликабельного текста или спойлера «показывать-скрывать»

0 голосов
/ 09 октября 2018

Да, есть миллионы вопросов и страниц, объясняющих, как использовать html, css и (необязательно) javascript для создания похожих вещей с именами:

  • hints
  • спойлеры
  • переключатели
  • показать / скрыть
  • подсказки

Но я не нашел ответа на этот вопрос:

Можно ли создать CSS , чтобы сделать что-то похожее на это (фрагмент html настолько малым, насколько это возможно), вести себя как переключатель / спойлер при нажатии ?

<div class="hint">The answer starts with an A</div>

Если это невозможно ... Это нормально! Вопрос в том, возможно ли это - я просто хочу знать.

Я ужеизвестно о базовом решении, которое работает, когда завис : 

<div title="The answer starts with an A. (This is shown when hovered.)">

Но решение должно быть интерактивным, потому что оно будет отображаться на телефоне, где «зависания» не существует.

CSS может быть длинным, но html должен быть максимально коротким.Причина, по которой html должен быть пустым, заключается в том, что я буду набирать его вручную много раз.Мне все равно, является ли это div или span или какие поля указаны, только если оно короткое.

Не может быть никаких других html где-либо как частьрешения.Это потому, что в этой системе мне приходится каждый раз печатать все html , тогда как я получаю CSS бесплатно.

Это даже не должно быть настоящим переключением: все, что язабота о том, что он начинается скрытно и отображается при нажатии.

Заранее благодарим вас за понимание!

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Если вы ищете что-то типа спойлера практически без кода, это может сделать это, и оно довольно гибкое. 

.hint {
  background-color: #ddd;
  display: inline-block; /* you could do this as a full-width block instead */
  padding: 8px 12px;
  position: relative; /* needed for placeholder positioning */
}

.hint:not(:active) {
  background-color: #eee; /* these two colors must be equivalent A */
  color: #eee; /* these two colors must be equivalent B */
  min-width: 96px; /* 72px if box-sizing is border-box; ensures the placeholder is fully visible if the text is smaller than the placeholder text */
  user-select: none; /* if you want it to be copyable, may highlight spoiler text when they click */
}

.hint:not(:active)::before {
  position: absolute;
  top: 8px;
  left: 12px;
  content: 'Click\a0to\a0reveal'; /* non-breaking spaces probably necessary */
  color: #999;
}
<div class="hint">I am a hint</div>

РЕДАКТИРОВАТЬ: добавлен заполнитель

0 голосов
/ 09 октября 2018

TL; DR: Минимальная версия CSS для пользовательского атрибута tooltip (вы можете выбрать другое имя): 

[tooltip]:active::after {
    content: attr(tooltip);
}
<div tooltip="This is tooltip">some div</div>

Более сложное решение
Можно создать правила для настраиваемого атрибута и добавить before (для стрелки подсказки) и after (для тела всплывающей подсказки) псевдоэлементы.
Непрозрачность по умолчанию для элементов preudo установлена ​​на 0. Когда элемент с пользовательским атрибутом равен active , установите непрозрачность на 1.
(Источник: учебник по подсказкам чистого CSS ) 

div{
margin: 0.5em 15em;
}

[tooltip]{
  position:relative;
  display:inline-block;
}
[tooltip]::before {
    content: "";
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.7) transparent transparent     transparent;
    z-index: 99;
    opacity:0;
}

[tooltip-position='left']::before{
  left:0%;
  top:50%;
  margin-left:-12px;
  transform:translatey(-50%) rotate(-90deg) 
}
[tooltip-position='top']::before{
  left:50%;
}
[tooltip-position='bottom']::before{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
[tooltip-position='right']::before{
  left:100%;
  top:50%;
  margin-left:1px;
  transform:translatey(-50%) rotate(90deg)
}

[tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left:50%;
    top:-6px;
    transform: translateX(-50%)   translateY(-100%);
    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff;
    padding:4px 2px;
    font-size: 12px;
    min-width: 80px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;
}

[tooltip-position='left']::after{
  left:0%;
  top:50%;
  margin-left:-8px;
  transform: translateX(-100%)   translateY(-50%);
}
[tooltip-position='top']::after{
  left:50%;
}
[tooltip-position='bottom']::after{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translateY(0%);
}
[tooltip-position='right']::after{
  left:100%;
  top:50%;
  margin-left:8px;
  transform: translateX(0%)   translateY(-50%);
}

[tooltip]:active::after,[tooltip]:active::before {
   opacity:1
}
<div tooltip="This is left tooltip" tooltip-position="left">tooltip on left</div>
<div tooltip="This is right tooltip" tooltip-position="right">right tooltip</div>
<div tooltip="This is bottom tooltip" tooltip-position="bottom">bottom tooltip</div>
<div tooltip="This is tooltip">tooltip without position attribute</div>
...