How to Change the Style of the Title Attribute Inside an Anchor Tag

HTML title attribute style

https://jsfiddle.net/LvjaxLfn/153/

<span aria-label="This is information">This is a test</span>

span:hover {
    position: relative;
}

span[aria-label]:hover:after {
     content: attr(aria-label);
     padding: 4px 8px;
     position: absolute;
     left: 0;
     top: 100%;
     white-space: nowrap;
     z-index: 20;
     background:red;
}

Using an aria label to keep accessibility

You could also add a transition delay to make it show up after a delay like a native html title

https://jsfiddle.net/f9zna6k2/10/

span {
  position: relative;
  cursor: pointer;
}

span[aria-label]:after {
  opacity:0;
  content: attr(aria-label);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20;
  background:red;
  transition: opacity 0.5s;
  pointer-events:none;
}

span[aria-label]:hover:after {
  opacity:1;
  transition-delay:1.5s;
}

how to style pure html title for specific anchor tags or div?

You can't style it directly, but you can create the same effect using a pseudoelement.

a[myTitle]:hover {  position: relative;}
a[myTitle]:hover:after {  content: attr(myTitle);  position: absolute;  left: 0;  top: 100%;  background: #000;  color: #fff;  padding: .5rem 1rem;  z-index: 1000;  white-space: nowrap;}

<h2>Link Titles</h2><p>The title </p><a href="#" myTitle="this is the title i want to style">Visit our HTML Tutorial</a>

Remove the old design title of an anchor tag after applying CSS on it

I don't think there is a simple way to do what you want, while still using the title attribute. So the answer to your original question:

Is it possible to remove default title tooltip?

Answer: Probably not possible. Each browser decides how to handle the title attribute. So unless there is some hacky way of disabling the default behavior for each browser, there is probably no way of achieving this.

Edit: Apparently this isn't possible in Chrome, but is possible in Firefox.

Alternative solution

Unless you absolutely must use the title attribute specifically, the easiest and simplest solution would probably be to just use another tag instead of title, for example data-title. That way, you're not triggering the default behavior while still achieving your default styles.

a:hover {    color: red;    position: relative;}
a[data-title]:hover:after {    content: attr(data-title);    padding: 2px 4px;    color: #333;    position: absolute;    left: 0;    top: 100%;    white-space: nowrap;    z-index: 20px;    -moz-border-radius: 5px;    -webkit-border-radius: 5px;    border-radius: 5px;    -moz-box-shadow: 0px 0px 4px #222;    -webkit-box-shadow: 0px 0px 4px #222;    box-shadow: 0px 0px 4px #222;    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);    background-image: -webkit-gradient(linear, left top, left bottom,                      color-stop(0, #eeeeee), color-stop(1, #cccccc));    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);}

<a data-title="Edit"><img alt="" src="dist/img/edit.png" ></a>

Is it possible to style a title? (and with CSS or js?)

You can put newlines in your title attribute via HTML entities to force a line break in the text. Most browsers these days support this. This is the only change you can make to the native tooltip display of the browser.

<a href="real_link" title="check
this
out">foo bar</a>

See the above example on a web page.

As others have pointed out, there exist a large number of plugins for various JS libraries for making custom HTML tooltips which are styleable. Here is the top hit for the Google search "jquery tooltip plugin", reviewing 10 such plugins.

How to change title attribute css in input?

You're thinking of a tooltip. The title property only displays that default browser-based tooltip and you can't style it.

Try a package like jQuery UI.

https://jqueryui.com/tooltip/

Edit: You can style the title element

Styling HTML Title attribute using CSS