Html title attribute showing up in-flow, inside el

Question

I'm using the title attribute in order to display a tooltip:

.remove_button{
background-color:#ff3300;
color:#ffffff;
font-family:Courier New,sans-serif;
font-weight:900;
font-size:20px;
float:right;
border-radius:5px;
padding:0px 6px 0px 6px;
margin-right:15px;
}

<div class="remove_button" title="Remove">x</div>

However the title shows up inside the element

------x------          :When not hovering
------xRemove------    :When hovering

one '-' is one pixel of padding

I got misunderstood the last time I asked, but to point it out clearly, the "title" isn't showing up above the rest of the content but it's showing up in-flow inside the actual button. This is not how a title usually works.

Edit: I found the problem, but this little piece of code hasn't affected any of my other 'title tooltips', how could that be?

*[title]:hover:after{
content:attr(title);
background-color:#feeba6;
color:#333333;
}

The purpose with the above code was to style the tooltips, but that doesn't seem to happen. Anyway, it was just some crap I found on google I suppose.

Answer 1

Natively browsers have tooltips if you hover over an element with a title attribute for long enough.

But, I think your tooltip has some javascript powering it that you've not included...?

Answer 2

Are you sure, that you haven't got anything else, that can confuse the browser.
You could try to create a file, only with that snippets of code, and see that works