Fragezeichen - Hover

    Huhu,


    ich hab mal eine Frage.
    Bei manchen Eingabefeldern in Formularen sind doch kleine Fragezeichen da, wenn man da drauf geht (hover, oder anklicken ist egal)
    dann soll so eine kleine Box mit einer Information bzw. einer genaueren Beschreibung stehen was in das Feld rein soll.
    Wie mach ich soetwas?
    Also meine Frage bezieht sich direkt auf die Box, wie ich reallisiere das sie unabhängig von dem Content dahinter. Also es soll sich nichts verschieben, die box soll sozusagen über dem Content sein und dann auch wieder verschwinden.


    - Tom

    Hallo,
    das ist mit den Möglichkeiten, die uns CSS3 gibt, gar nicht mal so schwer :)


    Neben dein Formular packst du einfach ein Fragezeichen, beispielsweise in Linkform:

    Code
    <a title="Dieser Text erscheint im Tooltip" class="tooltip">FRAGEZEICHEN HÖHÖ</a>


    Als nächstes stylen wir unseren Tooltip zumindest grundlegend ;)

    Code
    .tooltip{
    display: inline;
    position: relative;
}


    Jetzt platzieren wir unseren Tooltip inline mit unserem Link, indem wir eine relative Position wählen (oder immerhin das, was CSS als relativ versteht). Wir verpassen ihm ausserdem abgerundete Ecken und lassen ihn über dem Link "floaten" / schweben.



    Um das ganze zu beenden, packen wir einen kleinen Pfeil ans Ende des Tooltips (wir haben ja schließlich Stil). Dazu benutzen wir den :before-Selektoren und einige Ränder.


    Code
    .tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}




    Ein ganz billiges Beispiel sähe dann so aus:


    Spoiler anzeigen

    HTML
    <html><head>	<style>		.tooltip{			display: inline;			position: relative;		}		.tooltip:hover:after{			background: #333;			background: rgba(0,0,0,.8);			border-radius: 5px;			bottom: 26px;			color: #fff;			content: attr(title);			left: 20%;			padding: 5px 15px;			position: absolute;			z-index: 98;			width: 220px;		}		.tooltip:hover:before{			border: solid;			border-color: #333 transparent;			border-width: 6px 6px 0 6px;			bottom: 20px;			content: "";			left: 50%;			position: absolute;			z-index: 99;		}	</style></head><body>	<br />	<br />	<br />	<br />	<br />	<br />	<a title="Dieser Text erscheint im Tooltip" class="tooltip">FRAGEZEICHEN HÖHÖ</a></body></html>

    Spoiler anzeigen

    Wow das sieht echt gut aus. :)


    Danke.


    #edit: Wie kann ich verhindern das beim Hover neben der tooltip box noch so ein kleines Fenster mit dem Text kommt wie normalerweiße bei alt="" bei einem <img> ?


    - Tom



    Einmal editiert, zuletzt von Tomsen ()