What happens is that title is Global Attribute , it is not an element , or a pseudo element , summarizing it does not exist in the DOM and You can not "access" it to change the style. Can not style anything that is an attribute !

The title is styled by the user-agent of the Browser and what you can do is just select an element that has a Global Attribute and use that information to put a style in it. But the attribute style you can not change

  

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

Source: link

The Global Attribute list still includes:

• accesskey
• class
• contenteditable
• data- *
• dir
• draggable
• dropzone
• hidden
• id
• lang
• spellcheck
• style
• tabindex
• title
• translate

NOTE: Note that you do not style the ID of an element that is a Global Attribute, which you type is the element that has this ID

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

See that title :

  

The title global attribute contains text representing advisory   information, related to the element it belongs to.

PORTUGUESE "The global attribute title contains text that represents advisory information related to the element it belongs to."

link

Now see that aria-label :

  

The aria-label attribute is used to define the string that labels the   current element. Use it in cases where a text label is not visible on   the screen.

PORTUGUESE "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."

Source: link
Here is the official W3C documentation on WCAG and the aria and accessibility attributes link

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

No aria-label="meu title" puts your title, and invokes it in content: attr(aria-label); of the pseudo element.

OBS: This example is semantic, accessible and works pretty much like 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>

You can, yes, within the class .tooltip , using :hover that allows you to change something when the mouse overrides.

I started with that hidden, but when I gave :hover , that is, when I left with the mouse, I changed its visibility and I already left it personalized 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 that I have understood correctly xD.

Anything to say about it!