Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to also Show Appealing Information

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:

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.

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

How to also Show Appealing Information was first posted on September 7, 2016 at 3:51 pm.
©2016 "Holbizmetrics - Business meets Emotion". Use of this feed is for personal non-commercial use only. If you are not reading this article in your feed reader, then the site is guilty of copyright infringement. Please contact me at [email protected]

This post first appeared on Holbizmetrics - Business Meets Emotion, please read the originial post: here

Share the post

How to also Show Appealing Information


Subscribe to Holbizmetrics - Business Meets Emotion

Get updates delivered right to your inbox!

Thank you for your subscription