Dropdownbox mit tooltips

B

BlackCraven

Grünschnabel
Hallo zusammen.
Ich habe ein Problem und zwar habe ich eine dropdownliste mit Werten aus einer MySQL Datenbank. Jedoch sind die Werte zulang und werden somit einfach abgeschnitten. Ich möchte nun das der komplette Wert (ein Name) in einer Art Tooltip angezeigt wird.
Jedoch finde ich keinerlei möglichkeit wie es geht. Ich habe bereits im Internet geforscht und auch hier die Suche benutzt aber nichts gefunden.
title und on mouse over habe ich bereits ausprobiert, funktioniert leider beides nicht mit dem IE. Und die Page muss im IE funktionieren.
Wäre super dankbar wenn mir einer Helfen kann.
MfG
BlackCraven
 
toltipp:


im header:
Code: 
<script>
<!--
wmtt = null;

document.onmousemove = updateWMTT;

function updateWMTT(e) {
        x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
        y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;
        if (wmtt != null) {
                wmtt.style.left = (x + 20) + "px";
                wmtt.style.top         = (y + 20) + "px";
        }
}

function showWMTT(id) {
        wmtt = document.getElementById(id);
        wmtt.style.display = "block"
}

function hideWMTT() {
        wmtt.style.display = "none";
}
//-->
</script>


definieren:
Code: 
<div class="tooltip" id="1" >
    hier kommt der  text/bils donstwas den du beim drüberfahren sehen willst
</div>




deim toltiplink
Code: 
<a href="#" onMouseOver="showWMTT('1')" onMouseOut="hideWMTT()">
Text</a>
 
Dein Demo ist zum einen unvollständig (es fehlt die Stylesheet-Formatierung display:none) und zum anderen funktioniert es nicht (ein ID-Name darf nicht mit einer Ziffer beginnen).

Lauffähiges Tooltip-Demo:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
#infobox
{
display: none;
}
-->
</style>

<script type="text/javascript">
<!--
wmtt = null;

document.onmousemove = updateWMTT;

function updateWMTT(e) {
        x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
        y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;
        if (wmtt != null) {
                wmtt.style.left = (x + 20) + "px";
                wmtt.style.top         = (y + 20) + "px";
        }
}

function showWMTT(id) {
        wmtt = document.getElementById(id);
        wmtt.style.display = "block"
}

function hideWMTT() {
        wmtt.style.display = "none";
}
//-->
</script>

</head>
<body>

<a href="#" onmouseover="showWMTT('infobox')" onmouseout="hideWMTT()">Info-Link</a>

<div id="infobox">Info-Text</div>

</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
 
Zuletzt bearbeitet von einem Moderator:
Hallo
Erstmal super danke das ihr so schnell geantwortet habt, aber beide tipps sind für Links...
Der Tooltip soll aber in einer selectbox funktionieren. also in einer Dropdown liste.
Wenn da einer was weiss wie und ob das überhaupt geht bitte HILFE ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück