Menu
I have tried many times to do this, but it has not worked out yet.
When I mouse over this text
Then it must show me this box
I want to achieve this effect purely with CSS if anybody can do this.
711
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
CSS word-wrap property is used to break the long words and wrap onto the next line. This property is used to prevent overflow when an unbreakable string is too long to fit in the containing box. This property defines the breaks in the word to avoid the overflow when a word is too long to fit in the container.
There are two ways you can create a hover text for your HTML elements: Adding the global title attribute for your HTML tags. Creating a tooltip CSS effect using :before selector.
You can write like this:
CSS
span{ background: none repeat scroll 0 0 #F8F8F8; border: 5px solid #DFDFDF; color: #717171; font-size: 13px; height: 30px; letter-spacing: 1px; line-height: 30px; margin: 0 auto; position: relative; text-align: center; text-transform: uppercase; top: -80px; left:-30px; display:none; padding:0 20px; } span:after{ content:''; position:absolute; bottom:-10px; width:10px; height:10px; border-bottom:5px solid #dfdfdf; border-right:5px solid #dfdfdf; background:#f8f8f8; left:50%; margin-left:-5px; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); } p{ margin:100px; float:left; position:relative; cursor:pointer; } p:hover span{ display:block; } HTML
<p>Hover here<span>some text here ?</span></p> Check this http://jsfiddle.net/UNs9J/1/
102
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
