How to also Show Appealing Information

(I may receive commissions from the links in this post. For more informations read my Disclosure.)

Lol. 😀 Only now I am just aware that I accidentally published this TRIAL pos yesterday. Where I was just trying to figure out how to do decent tooltips.
Since I am a software developer as well I was thinking of How can I improve this site further?

Especially for the Toolbox I was unsatisfied in terms of describing.
I thought about: How can I let this there. But still add information? Without having to change the ext’s flow again.
That’s why I came up with Tooltips.


Every now and then you see the java implemented ones. But I thought about, hey, maybe there is a way to do them completely standalone.
No plugin. No javascript. Just pure CSS.

And I wanted to be able to do this easily. Because I searched for a possibility to embed those into my site.

Here you can see an example:

Hover me, because: This is the visible text, the tooltip container.

This is the hidden text, the tooltip contents that are only shown on hover.

How is it done?

A created a Tool Tip Example here for you to tryout online on jsfiddle.

First there comes some CSS with it.

CSS Example

/* CSS Tooltips */
.tooltipContainer {
	position: relative;
/* add position offsets if required */

.tooltip {
	position: absolute;
/* add position offsets if required */
	width: 200px;
/* edit as required */
	background-color: black;
/* edit as required */
	color: white;
/* edit as required */
	border-radius: 5px;
	padding: 10px;
	opacity: 0;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;


.tooltip {
	opacity: .8;
/* edit as required */

}.tooltipContainer .tooltip:hover {
	opacity: 0;
/* optional */

Try it Yourself

Click on the “Try it Yourself” button to see how it works.



Subscribe To Our Newsletter (3)

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Leave a Reply

Your email address will not be published. Required fields are marked *