Отключить тег привязки и при наведении мыши показать название заголовка, почему он отключен

Question

Я хочу отключить тег привязки и при наведении курсора мыши показать заголовок, почему он отключен?

<a href="domain.xyz" title="why it's disabled">sample domain</a>

попробовал ниже:

.disabled {
    opacity: 0.5;
    cursor: default !important;
    pointer-events: none !important;
}

но при наведении мышине работает.

Есть указания, как это сделать с помощью css?

Answer 1

У вас может появиться элемент :after с content: attr(title) для отображения причины.

a.disabled {
  cursor: not-allowed;
  text-decoration: none;
}

a.disabled:hover::after {
 content: attr(title);
 padding-left: 10px;
 color: black;
}

<a href="#" class="disabled" title="Unavailable now" onclick="return false">Click here</a>