0

What I am doing: I am trying to make a different style of style of <abbr> tag, and I found This code on Stack Overflow.
However, this code has a small problem that the default hint will still be shown when you move your mouse on the tag.
What I tried: I tried to hide the element and then using pseudo element to show the text instead, and I do not know how to get the content by only using CSS, so I posted a question last night. However, it seems that: it is impossible to get the content of the element, so I have to post this question for another solution. Also, my other idea is to make it lose focus, but after losing focus, the hover event cannot be triggered either.

Here is the code from that post(changed):

abbr[class*=bright]{
  color: black;
  background: yellow;
  position:relative;
  cursor:help;
}
abbr[class*=bright]:hover::after{
  color: white;
  background: red;
  content:attr(title);
  position:absolute;
  bottom: 0; right: 0;
  transform: translate(100%, 100%);
  white-space: nowrap;
}
<abbr title="Here is the title, as you can see, the default one is still there" class="bright">test</abbr>

What I want: As what I said, it has a small problem, so I want to hide the default hint, to only show my hint. Also, I want a CSS-only solution.

Han Han
  • 328
  • 12
  • The `title` attribute doesn't have to be the `title` attribute for it to work, some sources I used for help on how to style the title thing uses `gloss` instead of `title`. `title` is reserved by HTML for the purpose of showing that tool-tip when the user hovers over the element for long enough. There is no way to disable `title` from its reserved functionality. – Major_Flux- Feb 16 '23 at 05:58
  • @Major_Flux Thanks for your comment, and I will try that if it can not be solved. – Han Han Feb 16 '23 at 06:09

0 Answers0