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.

css-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;
}

.tooltipContainer:hover

.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.

 

___
Globe

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 *