Html title attribute showing up in-flow, inside element, when howering over it

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;
}

x

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.

Problem courtesy of: Dude Dawg

Solution

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

Solution courtesy of: javascript is future

CSS3 Recipes责编内容来自:CSS3 Recipes (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Html title attribute showing up in-flow, inside element, when howering over it

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录