Change title style within a tag

Question

You can change the style only with CSS from the attribute title that some HTML tags have?

<a href="#" title="Alterar esse estilo aqui">Passe o mouse</a>

Note that by default it has only this yellow background with a shadow, but that can vary in different browsers. The idea would be to change the color, the shadow and change the font style (size, family...).

Answer 1

What happens is that the title is a Global Attribute, he’s not a element, or a pseudo element, summarizing it doesn’t exist in DOM and you can’t "access it" to change the style. It is not possible to style something that is a attribute!

The title is stylized by user-agent browser, and what you can do is just select an element that has a Global Attribute and use this information to style it. But the style of the vc attribute cannot change

Global attributes are attributes common to all HTML elements; they can be used on all elements, although the attributes are not effect on some elements.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

The list of Global Attribute still includes:

• accesskey
• class
• contenteditable
• date-*
• say
• draggable
• Dropzone
• Hidden
• id
• lang
• spellcheck
• style
• tabindex
• title
• Translate

OBS: Keep in mind that you don’t style the ID of an element, since the ID is a Global Attribute, what you stylize is the element that has this ID, for the ID can be used as a selector.

---

About the attribute title and how to "replace it":

See that the title:

The title global attribute contains text Representing Advisory information, Related to the element it belongs to.

PORTUGUÊS "The global attribute title contains text representing advisory information related to the element to which it belongs."

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title

Now see that the aria-label:

The aria-label attribute is used to define a string that Labels the Current element. Use it in cases Where a text label is not Visible on the screen.

PORTUGUÊS "The attribute aria-label is used to define a string labeling the current element. Use it in cases where a text label is not visible on the screen."

Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
Here is the W3C official documentation on WCAG and attributes aria and accessibility https://www.w3.org/TR/WCAG20-TECHS/aria

So I think the best palliative in this case is to use the aria-label to make a "pseudo title" with a pseudo-element according to this example.

In the aria-label="meu title" you put your title, and invoke it on content: attr(aria-label); of the pseudo element.

OBS: This example is semantic, accessible and works practically like the title in use, definition and behavior.

a {
color: #e92c6c;
text-decoration:none;
font-weight:bold
}

[aria-label] {
position: relative;
}

[aria-label]::after {
content: attr(aria-label);
display: none;
position: absolute;
top: 110%;
left: 0px;
z-index: 5000;
pointer-events: none;
padding: 8px 10px;
text-decoration: none;
font-size: .9em;
color: #fff;
background-color: #412917;
}

[aria-label]:hover::after {
display: block;
}

<a href="#" aria-label="meu title">meu link com "title"</a>

Answer 2

It is possible yes, within the class .tooltip , using :hover which allows you to change something when the mouse goes over.

I started with that hidden, but when I gave the :hover, I mean, when I passed with the mouse, I changed its visibility and already left it customized using css ;)

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: green;
  color: yellow;
  text-align: center;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<a href="#">
  <div class="tooltip">Passe o mouse
    <span class="tooltiptext">Estilo BR huehe</span>
  </div>
</a>

I hope you have helped and now I have understood correct xD.

Anything comment on that!