✔ CSS ToolTip auf Textfeld

Status
Nicht offen für weitere Antworten.
D

DaRealMC

Erfahrenes Mitglied
Hi,

ich habe einen fertigen CSS-ToolTip für Links im Web gefunden. Allerdings brauche ich ihn nicht für einen Link, sondern für ein Textfeld. Ich schaffe es aber nciht, das entsprechend umzuschreiben. Ist es prinzipiell überhaupt möglich?

HTML: 
a.info {
    position:relative;
    z-index:98; 
    background-color:#cccccc;
    color:#000000;
    text-decoration:none
}

a.info:hover {
    z-index:99;
    background-color:#ffff00
}

a.info span {
    display: none
}

a.info:hover span {
    display:block;
    position:absolute;
    top:2em;
    left:2em;
    width:15em;
    border:1px solid #00ccff;
    background-color:#ccffff;
    color:#00000;
    text-align: center
}
 
Zuletzt bearbeitet:
Was verstehst du unter einem Textfeld?

Das p-Element (= Textabsatz) oder das textarea-Element (= mehrzeiliges Formular-Eingabefeld)?

Mit Ersterem ist es in den modernen Browsers (FireFox, Mozilla, Netscape, Opera) möglich, im IE nicht, da er die Pseudoklasse :hover nur auf Links anwendet.

Das span-Element (= Tooltip) wird ja zwischen <a> ... </a> notiert, also innerhalb eines öffnenden und schliessenden TAGs, ergo:

HTML: 
<textarea class="info" cols="30" rows="10"><span>Tooltip-Info</span></textarea>
was von den Browsers so ausgegeben / im Eingabefeld angezeigt wird:

Code: 
<span>Tooltip-Info</span>

Das title-Attribut bietet die Möglichkeit, einen Tooltip auf ein Eingabefeld zu legen:

HTML: 
<textarea cols="30" rows="10" title="Tooltip-Info"></textarea>
Ansonsten muß Javascript hinzugezogen werden.
 
Mit Textarea hätte ich das vielleicht hingebracht, da es ein open- und ein close-Tag hat und somit recht ähnlich dem a-tag ist.
Aber ich rede von einem <input type="text">. Es handelt sich hierbei um eine kleine Modifikation des WBB2. Und ich will eben aus einer kleinen Modifikation keine große machen, weil ich das gesamte tpl umschreiben muss.

Das Attribut 'title' hilft mir leider nicht wirklich, da es eine kleine Verzögerung gibt. Ich brauch das aber sofort.
 
Der (auch im Internet Explorer nicht unterstützte) Selektor + könnte helfen:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
    <meta http-equiv="Content-Type"
        content="application/xhtml+xml; charset=UTF-8" />
    <title>Textarea mit Tooltip</title>
<style type="text/css" media="screen">
    div.tooltipped {
        position:relative;
    }
    div.tooltipped span.tip {
        display:none;
    }
    div.tooltipped textarea:hover + span.tip,
    div.tooltipped input:hover + span.tip {
        display:block;
        position:absolute;
        top:0.5em;
        left:1em;
        width:10em;
        border:1px solid #0cf;
        background-color:#cff;
        color:#000;
        text-align: center;
        z-index:100;
    }
</style>
</head>
<body>
<div>
    <form action="./send.php" method="post">
        <div class="tooltipped">
            <input name="title" value="" />
            <span class="tip">Ein CSS-Tooltip &uuml;ber<br />
                dem Eingabefeld.</span>
        </div>
        <div class="tooltipped">
            <textarea name="message" cols="40" rows="10"></textarea>
            <span class="tip">Ein CSS-Tooltip &uuml;ber<br />
                der Textarea.</span>
        </div>
    </form>
</div>
</body>
</html>
Gruß hpvw
 
Habs jetzt mal so umgesetzt.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta name="author" content="MC.Iglo">
<style type="text/css"><!--
div.info {
    position:relative;
    z-index:98;
    background-color:#565881;
    color:#000;
    text-decoration:none
    width:auto;
}

div.info:hover {
    z-index:99;
    background-color:#565881;

}

div.info span {
    display: none;
    width:auto;
}

div.info:hover span {
    display:block;
    position:absolute;
    top:1em;
    left:2em;
    width:auto;
    border:1px solid #000000;
    background-color:infobackground;
    color:infotext;
    text-align: left
}

--></style>
</head>
<body text="#000000" bgcolor="#565881" link="#FF0000" alink="#FF0000" vlink="#FF0000">    <br><br><br>
<div class=info><input type="Text" name="" value="" size="" maxlength=""> <span>ToolTipText</span></div>
</body>
</html>
 
DaRealMC hat gesagt.:
Habs jetzt mal so umgesetzt
Zum Vergrößern anklicken....
Was im IE nicht funktioniert, da er, wie schon in meinem ersten Posting erläutert, die Pseudoklasse :hover nur für Links unterstützt -> a:hover.
 
Ja, weiß ich.

Hintergrund: Die Aktivirungsmail des WBB2 landet bei Yahoo sofort im Spamfilter und wird gelöscht.
Deshalb habe ich das Hover auf das A-Mail-Textfeld gelegt. Und zusätzlich noch ein onMouseOver Alert, wenn die eingegebene Mailadresse '@yahoo.' enthält.
Das JS hätte ich gerne abgelöst. Aber wenn das dank MS mal wieder nicht machbar ist...

http://forum.schwarzes-wuerzburg.net/register.php
 
Hier mein JavaScript-gestützter Lösungsvorschlag, damit auch im IE ein Tooltip über dem Eingabefeld eingeblendet wird:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta name="author" content="MC.Iglo">

<script type="text/javascript">
<!--
function ShowHide(id) {
    obj = document.getElementsByTagName("span");
    if (obj[id].style.visibility == 'visible'){
    obj[id].style.visibility = 'hidden';
    }
    else {
    obj[id].style.visibility = 'visible';
    }
}
//-->
</script>

<style type="text/css">
<!--
body
{
background: #565881;
color: #000000;
}

span#tooltip
{
visibility: hidden;
position: relative;
top: 0.5em;
left: -3em;
border: 1px solid #000000;
background-color: infobackground;
color: infotext;
text-align: left;
}
-->
</style>

</head>
<body>

<input type="Text" name="" value="" size="" maxlength="" onmouseover="ShowHide('tooltip')" onmouseout="ShowHide('tooltip')"><span id="tooltip">ToolTipText</span>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück