CSS

Simple Formular Tooltips ohne Javascript (Drupal)

Demo

Nachdem ich gewohnheitsmäßig sofort zu Jquery gegriffen habe, kam mir so in den Sinn.. HEY! im Prinzip ist JavaScript in diesem Fall doch überhaupt nicht nötig.

Und tatsächlich ist die Lösung per CSS wesentlich einfacher und macht doch im Endeffekt dass selbe wie die Jquery Lösung.

In Drupal haben wir das Description-Div innerhalb der Form Items, so wir denn eine Beschreibung für das Feld eingegeben haben. Wir können die Beschreibung also super per .form-item:hover steuern. Wir gehen also einfach her und blenden die Beschreibung kurzerhand aus und blenden sie per :hover wieder ein. Das ganze lässt sich per CSS3 – Transition auch noch sehr ansehnlich gestalten.

Code und Grafiken unterhalb! Die Selektion ist auf Drupal + Modul „Node Form Colums“ ausgerichtet und muss für andere Systeme natürlich angepasst werden.

Demo 


#node-form .form-item .description{
	opacity:0.3;
	position:absolute;
	left:-36px;
	bottom:14px;
	height:20px;
	padding:7px;
	width:20px;
	color:transparent;
	overflow:hidden;
	background-image:url(../images/tooltip_birne.png);
    background-position:bottom right;
    background-repeat:no-repeat;
}

#node-form .form-item{
	position:relative;
}

#node-form .form-region-main:hover .form-item .description,
#node-form .form-region-right:hover .form-item .description{
	display:block;
	opacity:0.4;	
	z-index:99;
	
	transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;	
    
    border-radius:10px 10px 0 10px;
}

#node-form .form-region-main .form-item:hover .description,
#node-form .form-region-right .form-item:hover .description{
	opacity:1.0;
}

#node-form .form-item .description:hover,
#node-form fieldset .form-item .description:hover{
	opacity:1.0;
	left:-207px;	
	color:#000;
	width:200px;
	height:auto;
	background-color:#fff;
 	background-image:url(../images/tooltip_arrow_right.png);
 	
	box-shadow:-5px -5px 4px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow:-5px -5px 4px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:-5px -5px 4px rgba(0, 0, 0, 0.3);
}

arrow
arrow