Tooltip with non-JavaScript HTML content

Question

There are many JavaScript-based libraries that show tooltips when you hover over a specific area of ​​a web page. Some of them are quite simple, some allow the tooltip to display HTML content in CSS style.

But is there a way to show a stylized tooltip without using JavaScript? If you use the title attribute, the tags are not processed (for example, foo<br />bar does not create a line break). I am looking for a solution to display stylized HTML content without using JavaScript.

Answer 1

I made a small example using css

 .hover { position: relative; top: 50px; left: 50px; } .tooltip { /* hide and position tooltip */ top: -10px; background-color: black; color: white; border-radius: 5px; opacity: 0; position: absolute; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; } .hover:hover .tooltip { /* display tooltip on hover */ opacity: 1; } 

 <div class="hover">hover <div class="tooltip">asdadasd </div> </div> 

Fiddle

http://jsfiddle.net/8gC3D/471/

Answer 2

Using the title attribute:

 <a href="#" title="Tooltip here">Link</a> 

Answer 3

Like koningdavid's, but works on display: none and block, and adds an extra style.

 div.tooltip { position: relative; /* DO NOT include below two lines, as they were added so that the text that is hovered over is offset from top of page*/ top: 10em; left: 10em; /* if want hover over icon instead of text based, uncomment below */ /* background-image: url("../images/info_tooltip.svg"); /!* width and height of svg *!/ width: 16px; height: 16px;*/ } /* hide tooltip */ div.tooltip span { display: none; } /* show and style tooltip */ div.tooltip:hover span { /* show tooltip */ display: block; /* position relative to container div.tooltip */ position: absolute; bottom: 1em; /* prettify */ padding: 0.5em; color: #000000; background: #ebf4fb; border: 0.1em solid #b7ddf2; /* round the corners */ border-radius: 0.5em; /* prevent too wide tooltip */ max-width: 10em; } 

 <div class="tooltip"> hover_over_me <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus dui. Sed at orci. </span> </div> 

Answer 4

It is very interesting,

HTML and CSS only

 .help-tip { position: absolute; top: 18px; left: 18px; text-align: center; background-color: #BCDBEA; border-radius: 50%; width: 24px; height: 24px; font-size: 14px; line-height: 26px; cursor: default; } .help-tip:before { content: '?'; font-weight: bold; color: #fff; } .help-tip:hover span { display: block; transform-origin: 100% 0%; -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } .help-tip span { display: none; text-align: left; background-color: #1E2021; padding: 5px; width: 200px; position: absolute; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); left: -4px; color: #FFF; font-size: 13px; line-height: 1.4; } .help-tip span:before { position: absolute; content: ''; width: 0; height: 0; border: 6px solid transparent; border-bottom-color: #1E2021; left: 10px; top: -12px; } .help-tip span:after { width: 100%; height: 40px; content: ''; position: absolute; top: -40px; left: 0; } 

 <span class="help-tip"> <span > This is the inline help tip! </span> </span> 

Answer 5

Pure CSS:

 .app-tooltip { position: relative; } .app-tooltip:before { content: attr(data-title); background-color: rgba(97, 97, 97, 0.9); color: #fff; font-size: 12px; padding: 10px; position: absolute; bottom: -50px; opacity: 0; transition: all 0.4s ease; font-weight: 500; z-index: 2; } .app-tooltip:after { content: ''; position: absolute; opacity: 0; left: 5px; bottom: -16px; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent rgba(97, 97, 97, 0.9) transparent; transition: all 0.4s ease; } .app-tooltip:hover:after, .app-tooltip:hover:before { opacity: 1; } 

 <div href="#" class="app-tooltip" data-title="Your message here"> Test here</div> 

Answer 6

You can use the title attribute, for example, if you want to have a tooltip above the text, just do:

 <span title="This is a Tooltip">This is a text</span> 

Answer 7

Another similar way to do this with CSS:

 #img { } #img:hover {visibility:hidden} #thistext {font-size:22px;color:white } #thistext:hover {color:black;} #hoverme {width:50px;height:50px;} #hoverme:hover { background-color:green; position:absolute ; left:300px; top:100px; width:40%; height:20%; } 

 <p id="hoverme"><img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"></img><span id="thistext">LOCATZ!!!!</span></p> 

Try this: http://jsfiddle.net/FdBu7/

And here are some links on transitions and new ways to do this: http://www.w3schools.com/css3/css3_transitions.asp http://dev.opera.com/articles/view/css3-show-and-hide/

Answer 8

This is my solution for this:

https://gist.github.com/BryanMoslo/808f7acb1dafcd049a1aebbeef8c2755

The element overwrites the "tooltip-title" attribute with the tooltip text, and it appears when you hover the CSS cursor, I prefer this solution because I do not need to include the tooltip text as an HTML element!

 #HTML <button class="tooltip" tooltip-title="Save">Hover over me</button> #CSS body{ padding: 50px; } .tooltip { position: relative; } .tooltip:before { content: attr(tooltip-title); min-width: 54px; background-color: #999999; color: #fff; font-size: 12px; border-radius: 4px; padding: 9px 0; position: absolute; top: -42px; left: 50%; margin-left: -27px; visibility: hidden; opacity: 0; transition: opacity 0.3s; } .tooltip:after { content: ""; position: absolute; top: -9px; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #999999 transparent transparent; visibility: hidden; opacity: 0; transition: opacity 0.3s; } .tooltip:hover:before, .tooltip:hover:after{ visibility: visible; opacity: 1; } 

Answer 9

I think this is what you are asking for! http://kazzkiq.imtqy.com/balloon.css/