Pure CSS: center hover over hover text

Question

Try to see what I have so far: http://jsbin.com/udegux/1/edit

HTML

<span id="test" class="drag-hint"><span>drag</span>Mouse and drag</span>

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’m currently manually centering the tooltip for hovering over the text by specifying the attributes “top” and “left”. If the text was longer or shorter, I would have to manually change these values ​​so that the tip orientation looked in the center.

I'm looking for a way to automatically center the word drag over the phrase Mouse and Drag using pure CSS.

Answer 1

If you put a block on top of the text and above and install text-align: center, you won’t need to use JavaScript.

.drag-hint:hover > span {
  display: inline;
  position:absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
}

JSBin.