Лучшее решение для отображения атрибутов заголовка в «отключен» <a>

Question

Самый простой способ отключить <a> ссылки - это пользовательский CSS -класс "отключен", который устанавливает нулевые события-указатели.

Как бы то ни было атрибуты title, где мы хотели бы отобразить причина, по которой ссылка отключена, так как текст при наведении больше не работает ... См. пример ниже:

a.disabled,
a.disabled:visited {
  pointer-events: none;
  color: grey;
}

<a href="#" title="link is clickable">active Link with hover text</a>
<br>
<a href="#" class="disabled" title="link is disabled because of...">disabled link with hidden hover text</a>

Я вижу две возможности, которые не очень элегантны:

Завершение <a> и добавление заголовка к родителю . Но это ненужный элемент переноса, который может повлиять на стилизацию.

a.disabled,
a.disabled:visited {
  pointer-events: none;
  color: grey;
}

<a href="#" title="link is clickable">active Link</a>

<br>

<span title="link is disabled because of...">
  <a href="#" class="disabled">disabled link</a>
</span>

Поскольку мы используем деактивированные теги привязки, в основном стилизованные как кнопки, мы могли бы использовать <button> вместо . Но, к сожалению, навигация по кнопкам не может быть открыта по желанию в отдельном windows, как <a> do (через контекстное меню или щелчок средней кнопкой мыши). Это может быть добавлено с дополнительным Javascript, но это будет еще худшее решение ...

a.disabled,
a.disabled:visited {
  pointer-events: none;
  color: grey;
}

<button href="#" title="link is clickable" onclick="location.href='http://www.google.com'">
  active button
</button>

<br>

<button title="link is disabled because of..." onclick="location.href='http://www.google.com'" disabled>
  disabled button
</button>

Я даже не понимаю, почему нет атрибута disabled для <a> в стандартных * 1047 кнопках типа ...

Есть какие-нибудь идеи для действительно правильного решения для отключенных тегов привязки, но по-прежнему отображать текст при наведении заголовка? Было бы неплохо найти решение CSS only или аналогичный подход.

Answer 1

Вы можете использовать атрибут title с отключенными ссылками, вы должны изменить свой код следующим образом:

a.disabled {
  pointer-events: auto;
  color: grey;
}
a.disabled:active {
  pointer-events: none;
}

Это пример использования атрибута title и пользовательского атрибута с именем data-tooltip для показать текст подсказки:

a.disabled {
  pointer-events: auto;
  color: grey;
}
a.disabled:active {
  pointer-events: none;
}
/* Tooltip **/
[data-tooltip] {
  position: relative;
  z-index: 10;
}

[data-tooltip]::after {
  pointer-events: auto;
  background: #444;
  border-radius: 0.25rem;
  box-shadow: 0 1rem 2rem -0.5rem rgba(0, 0, 0, 0.25);
  color: #fff;
  content: attr(data-tooltip);

  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 1px;
  line-height: 1;
  max-width: 11rem;
  opacity: 0.8;
  padding: 0.375rem 0.25rem;

  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.25rem);

  text-align: center;
  transform: translate(-10%, 0.25rem);
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  visibility: hidden;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 999;
}

[data-tooltip]:hover::after {
  visibility: visible;
  opacity: 0.8;
  transform: translate(-50%, 0.125rem);
  z-index: 9999 !important;
  transition: opacity 200ms ease-in-out, transform 500ms ease-in-out;
}

<br>
<br>
<a href="#active" data-tooltip="link is clickable">active Link with hover text</a>
<br>
<a href="#disabled" title="I'm the title attribute" class="disabled" data-tooltip="I'm the data-tooltip attribute">disabled link with hidden hover text</a>

Answer 2

Если вы хорошо используете немного Javascript, вы можете просто go вот так:

document.addEventListener('click', function(event) {
  if (event.target.matches('a.disabled')) 
    event.preventDefault();
})

a.disabled,
a.disabled:visited {
  color: grey;
}

<a href="#" title="link is clickable">active Link with hover text</a>
<br>
<a href="https://google.com" class="disabled" title="link is disabled because of...">disabled link with hidden hover text</a>