Pure CSS: Center Tooltip Above Text On Hover pt. 2

Question

Expanding on Pure CSS: Center Tooltip Above Text On Hover -- how does one make the tooltip hover centered relative to its container if the tooltip is wider than said

Answer 1

JS Bin

I achieve your question.

HTML

This:
    
drag drag drag drag drag
Hover me
    
Should appear as:
    

CSS

.drag-hint {
  position:relative;
  margin: 50px;
}
.drag-hint > p {
  background: black;
  color: white;
  width: 100%;
 display: none;
}
.drag-hint:hover > p {
  display: inline;
  position:absolute;
  top: -40px;
  left: 0;
  right: 0;
  text-align: center;
}