Lol. Only now I am just aware that I accidentally published this TRIAL poste 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:

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

The post How to also Show Appealing Information appeared first on Holbizmetrics - Business Meets Emotion.