Menu
Fiddle 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 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.
533
To make a simple tooltip, we'll first create the HTML element that triggers the tooltip when hovered over. We'll create this element as a div and assign it the class hover-text. Next, we'll create the element for the tooltip itself. This will be a span element with the class tooltip-text.
The solution is to use HTML '<table>' format for tooltip with 'text-align: center'.
The tooltip, also known as infotip or hint, is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element, such as a description of a button's function, what an abbreviation stands for, or the exact absolute time stamp ...
The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" . CSS: The tooltip class use position:relative , which is needed to position the tooltip text ( position:absolute ). Note: See examples below on how to position the tooltip. The tooltiptext class holds the actual tooltip text.
If you position the block on top of the text and above and set text-align: center, there shouldn't be any need to use JavaScript.
.drag-hint:hover > span {
display: inline;
position:absolute;
top: -25px;
left: 0;
right: 0;
text-align: center;
}
JSBin.
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
