Чистый CSS: центральная всплывающая подсказка над текстом при наведении ⇐ CSS

[Гость]

Поиграйте, чтобы посмотреть, что у меня есть на данный момент: http://jsbin.com/udegux/1/edit

HTML
< бр />

Код: Выделить всё

dragMouse and drag

CSS:

Код: Выделить всё

.drag-hint {
position:relative;
}
.drag-hint > span{
display:none;
}
.drag-hint:hover > span {
display:inline;
position:absolute;
top: -25px;
left: 30px;
}

As you can see, I am currently manually centering the hover drag tip over the text by specifying the "top" and "left" attributes. If the text was longer or shorter, I would have to manually change those values to make the tip look centered.

I am looking for a way to automatically center the word "drag" above the phrase "Mouse and drag" using pure CSS.


Источник: https://stackoverflow.com/questions/167 ... t-on-hover