Tooltip

son gohan hat gesagt.:
kannst du ein Beispiel bauen mit meinem einfachen Tooltip Code da unten, so ein Tooltip der auch im Google Chrome Browser stehen bleibt? Ich habe es selbst noch nicht hinekommen.
Zum Vergrößern anklicken....
... und ich werde es auch nicht hinbekommen, da "Chrome" die hierfür erforderliche :focus-Pseudoklasse nicht unterstützt.

Darauf hatte ich dich aber vorgestern Abend schon hingewiesen, und nicht ohne Grund eine JS-Umsetzung empfohlen.

Liest du eigentlich nicht die Antworten, die du bekommst?

mfg Maik
 
Maik hat gesagt.:
... und ich werde es auch nicht hinbekommen, da "Chrome" die hierfür erforderliche :focus-Pseudoklasse nicht unterstützt.

Darauf hatte ich dich aber vorgestern Abend schon hingewiesen, und nicht ohne Grund eine JS-Umsetzung empfohlen.

Liest du eigentlich nicht die Antworten, die du bekommst?

mfg Maik
Zum Vergrößern anklicken....

Hallo,

sorry, du hast mich glaub ich falsch verstanden, ich wollte auch eine Javascript Lösungen finden, aber das Beispiel vom Stu ist zu kompliziert gewesen.

Ich hab jetzt aber gerade ein Beispiel gefunden das funktioniert mit Javascript, was jetzt noch fehlt an dem Beispiel wäre, wenn jemand wieder wo anders hin klickt als auf den Link, sollte wieder der alte Stylesheets übernommen werden, da weis ich noch nicht wie ich das mache, aber insgesamt wäre das schon alles was ich an Javascript in meiner homepage benutze.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>CSS mit JavascriptTest</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function setCSS () {
document.getElementById('CSSWechsel').className="change";
}
//-->
</script>

<style type="text/css">
<!--
a.change:link,
a.change:active,
a.change:visited
{
 display:block;
 width:200px;
  background:#FF0000;
}

a.mumi:link,
a.mumi:active,
a.mumi:visited
{
 display:block;
 width:200px;
  background:#00FF00;
}
-->
</style>
</head>
<body>

<a href="#" onclick="setCSS()" id="CSSWechsel" class="mumi">CSSWechsel</a>

</body>
</html>

Was ich mich aber zuletzt noch frage ist, ich benutze ja eine "id" für den Link, wenn ich jetzt mehrere Links habe muss ich dann mehrere Javascript Funktionen erstellen mit anderer "id" oder kann man immer die gleiche Funktion benutzen?

Besten Dank.
 
Z-Index Problem im CSS Tooltip?

Hallo,

tut mir leid das ich mich gerade noch mal melden muss wegen ein z-index Problem aber ich habe gerade wieder den Durchblick verloren und bin doch noch nicht so gut in CSS und geschweige den davon, kaum noch mein Projekt hier neutral genug am betrachten.

Problem diesmal ist das nur der IE6 Browser im Tooltip ein Kasten nicht bedeckt, wie ich das meine ist unten im Bild noch mal genauer zu erkennen. Der blaue Kasten ist ein Tooltip welcher erscheinen tut wenn man auf den kleinen gelben Kasten drauf klickt, welcher neben den Hyperlinks steht.

Ich finde der IE 6 Browser ist noch einer von den älteren Kanditaten die man trotzdem noch berücksichtigen sollte beim Bau.

Hier ist die Testseite einmal, ich habe leider den Durchblick verloren, sorry.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>CSS Z-Index Test</title>
<style type="text/css">
.kasten1{
width:488px;
height:200px;
border:5px solid #00FF00;
position:absolute;
top:50px;
left:50px;
}
.kasten1 p
{
margin:0px;
padding:0px;
position:absolute;
width:105px;
height:22px;
border:1px solid #000;
}
.kasten2{left:5px;top:5px;}
.kasten3{left:160px;top:5px;}

.kasten1 a {
text-decoration:none;
display:block;
border:0px solid #000;
width:20px;
height:20px;
position:absolute;
bottom:1px;
right:27px;
background:#FFFF00;
}
.kasten1 a:hover {
background:#FF0000;
}
.kasten1 a .tooltip {
display: block;
position: absolute;
left: -5000px;
visibility: hidden;
}
.kasten1 a:hover .tooltip
{
display: block;
width:200px;
height:200px;
background:#0000FF;
left:0px;
top:-60px;
position:absolute;
border:1px dashed #000;
visibility:visible;
}
:hover{
z-index:200;
}
</style>
</head>
<body>


<div style="width:650px;height:300px;border:10px solid #000;position:relative;z-index:100;">
<div class="kasten1">
<p class="kasten2">Link1 <a href="#nogo"><span class="tooltip abstand1">Tip1</span></a></p>
<p class="kasten3">Link2 <a href="#nogo"><span class="tooltip abstand2">Tip2</span></a></p>
</div>
</div>


</body>
</html>
 
In diesem Fall müssen für die Vorgängerversionen des IE7 die Boxen .kasten2 und .kasten3 mit absteigenden Schichtpositionen formatiert werden:

Code: 
<style type="text/css">
/* Dein CSS */
</style>
<!--[if lt IE 7]>
<style type="text/css">
.kasten2{z-index:1000;}
.kasten3{z-index:999;}
</style>
<![endif]-->


mfg Maik
 
Beziehungsweise, was mache ich wenn der Tooltipkasten etwas größer ist, dann bedeckt der rechte nicht mehr den linken, siehe Bild unten, also mit den absteigenden z-index vergeben klappt es wohl doch nicht, man müsste eine universelle z-index für das Elemnet geben das gerade im Tooltip erscheint, nur schade das ich es noch nicht hinbekommen habe.
 

Anhänge

  • beispiel.jpg
    beispiel.jpg
    13,3 KB · Aufrufe: 9
Dann überleg dir ein Tooltip-Konzept, in dem solch ein Fall erst garnicht auftritt.

Oder findest du das da etwa benutzerfreundlich, wenn der rechte Link, aus dem der Tooltip stammt, vollständig von ihm überdeckt wird?

mfg Maik
 
Ich benutze den Tooltip nur als Infokasten, er kann ruhig über die anderen Links stehen.

Ich habe gelesen das dieses Problem aufrtitt wenn man die CSS Eigenschaften "position" verwendet, war aber genau auf "position" Eigenschaften zurück gewischen, weil mich die verschiedenen rowser schon vorher mit "float" und "clear" genug geärgert hatten, das sie auch dies unterschiedlich behandeln.

Naja wenn es keine standardlösungen gibt werd ich es dann noch mal was ohne "position" versuchen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück