Tooltip

Hallo Lieber Leser,

ich habe ein Problem mit meinem CSS Tooltip, im Internet Explorer funktioniert er zwar, aber ich habe es eben im Google Chrome Browser getetet und es funktioniert dort nicht ganz richtig, der Tooltip bleibt nicht stehen, müsste er aber nach meinen CSS Angaben habe ich a.active und a:focus so eingestellt das er stehen bleibt wenn man in anklickt, er tut es auch im IE Browser aber nicht im Google Chrome.

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 Tooltip Test</title>
<style type="text/css">
a.rot         ,
a.rot:link    ,
a.rot:visited {
display:block;
width:70px;
height:70px;
background:#FF0000;
position:relative;
}

.grun {
display:block;
width:60px;
height:60px;
background:#00FF00;
position:absolute;
left:-1000px;
}
a.rot:hover  .grun{border:none;left:208px;top:0px;}
a.rot:active .grun{border:none;left:208px;top:0px;}
a.rot:focus  .grun{border:none;left:208px;top:0px;}

</style>
</head>
<body>

<div style="width:200px;height:200px;background:#FFFF00;position:relative">
<a class="rot" href="#">Link<span class="grun">Tolltip</span></a>
</div>

</body>
</html>
 
Hi,

"Google Chrome" unterstützt hier nicht die :focus-Pseudoklasse, mit der die Box solange geöffnet bleiben soll, wie der Link den aktuellen Fokus besitzt, und das Aktionsende für :active interpretiert dieser Browsertyp, wie auch Firefox, Opera, Safari & Co., mit dem Loslassen der Maustaste, und nicht wie der IE, erst mit dem darauffolgenden Mausklick in das Fenster.

Mit CSS kommst du hier dann auch nicht mehr weiter, sondern wirst das Ein- und Ausblenden des Tooltips mit JS steuern müssen, damit er nicht "vorzeitig" ausgeblendet wird.

mfg Maik
 
Hi,

wäre es den so rum für die IE Familie in Ordnung
Code: 
a.rot:hover
?

und welche Javascript Lösung such ich am besten?
 
Deine erste Frage beantworten meine beiden Postings #5 und #8.

Click through flyout menu wäre ein Kandidat, was die scripttechnische Umsetzung betrifft. Das Erscheinungsbild ist letztlich nur eine Frage der CSS-Formatierung :)

mfg Maik
 
Hallo Lieber Leser,

ich habe eine Frage, ich habe nun unten ein neuen CSS Tooltip gebaut mit Hilfe von einigen Beispielen, beim Bau dieses Tooltip habe ich Wert darauf gelegt das auch jeder Browser die verwendeten CSS Eigenschaften verarbeitet.

Um das Tooltip unsichtbar zu machen habe ich die CSS Eigenschaften "position:absolute;left:-5000px;" gewählt, in einer Liste konnte ich ablesen das das CSS Eigenschaft "position" und dazu gehörige Längenangaben alle Browser verarbeiten können.

Ich musste auch die Eigenschaften "display:block" benutzen um innerhalb des HTML"a" Tags den HTML "span" Tags die Eigenschaft eines Blockelementes zu verleihen um valides HTML zu erstellen, jedoch konnte ich in einer Liste ablesen, das die CSS Eigenschaft "display:block" vom Netscape 4 nicht verstanden wird, aber ich hoffe da diesen Browser einfach niemand mehr verwendet und alle anderen es verarbeiten können.

Ich habe es im IE 6 Browser entwickelt und hoffe jetzt das wirklich so gut wie alle Browser den Tooltip hinbekommen und das ist eigentlich auch schon meine Frage, was meinst du lieber Leser, wird dieser Tooltip es schaffen, wenn nein woran wird es fehlen?

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 Tooltip Test</title>
<style type="text/css">

.linkk{
  display: block;
  border:1px solid #000;
}

.nav a {
	display: block;
  width:200px;
	position: relative;
	background: #FFFF00;
}

.nav a:hover {
  background: #00FF00;
}

.nav a .tooltip {
	display: block;
	width:200px;
	background:#3F00FF;
  border:1px solid #000;
	position: absolute;
	top: 0px;
	left: -5000px;
	z-index: 10;
  visibility: hidden;
}
.nav a:hover .tooltip {
	left:200px;
  visibility: visible;
}
.nav a:active .tooltip {
	left:200px;
  visibility: visible;
}
.nav a:focus .tooltip {
	left:200px;
  visibility: visible;
}
</style>
</head>
<body>
<div class="nav">
	<a href="#nogo">
	<span class="linkk">Link</span>
	<span class="tooltip">Tooltip</span>
	</a>
</div>

</body>
</html>

Kommentare: Den IE7 Browser zeigt beim ersten Laden der Seite bei mir die Schrift "Tooltip" nicht an, erst nachdem ich auf "link" einmal klicke wird die Schrift "Tooltip" angezeigt, hier wird im CSS Teil ein "focus" oder "active" Problem sein das ich noch nicht gelöst habe.
 
son gohan hat gesagt.:
und das ist eigentlich auch schon meine Frage, was meinst du lieber Leser, wird dieser Tooltip es schaffen [...]?
Zum Vergrößern anklicken....
Diese Frage kannst du dir ganz einfach selber beantworten, indem du den Tooltip in allen gängigen Browsern testest.

son gohan hat gesagt.:
Den IE7 Browser zeigt beim ersten Laden der Seite bei mir die Schrift "Tooltip" nicht an, erst nachdem ich auf "link" einmal klicke wird die Schrift "Tooltip" angezeigt, hier wird im CSS Teil ein "focus" oder "active" Problem sein das ich noch nicht gelöst habe.
Zum Vergrößern anklicken....
Bei mir wird der Tooltip in keinem Browser beim Seitenaufruf angezeigt (wie auch mit left:-5000px? :suspekt:), sondern erst, wenn ich den Link mit der Maus überfahre und :hover in Aktion tritt. Der IE7 verhält sich hier genauso, wie die anderen Browser, folglich kann ich im Stylesheet kein Problem mit :active und/oder :focus lokalisieren.

Übrigens lassen sich diese drei Regelblöcke

CSS: 
.nav a:hover .tooltip {
	left:200px;
  visibility: visible;
}
.nav a:active .tooltip {
	left:200px;
  visibility: visible;
}
.nav a:focus .tooltip {
	left:200px;
  visibility: visible;
}

auch gruppieren

CSS: 
.nav a:hover .tooltip,
.nav a:active .tooltip, 
.nav a:focus .tooltip {
	left:200px;
  visibility: visible;
}

mfg Maik
 
Hallo,

ich habe leider nicht alle Browser zur Verfügung, bei Konquerer und Safari bin ich dran gescheitert beim Versuch sie zu bekommen, das scheint irgendwie etwas zu kompliziert zu sein. Ich dachte ich mir das vielleicht jemand sich sehr gut auskennt mit CSS und es auf Anhieb weis ob der Code universall gut einsetzbar ist.


Das Problem welches ich wegen dem IE7 erwähnte war zum Glück nur ein Flüchtigkeitsfehler, die Schrift hat die gleiche farbe gehabt wie der Hintergrund und änderte sich erst nach klick auf "Link".


Danke für den Tip der Gruppierung, ich bin schon etwas vorichtig geworden nach zu viel Mißerfolgen mit CSS und schreibe nur noch alles seperat, es geht mir natürlich langsam einfach nur noch auf die Nerven, da will man einfach in paar Tagen ein paar Seiten erstellen mit Kleinigkeiten, aber die ganzen Browser und das benutzte CSS halten ein ewig auf und schnell sind Wochen und Monate umsonst vergangen mit hin und her suchen, das kostet ja auch unheimlich viel Kraft sich ständig mit so vielen einzelnen Themen befassen zu müssen. Man kann ja nicht auf so vielen Hochzeiten gleichzeitig tanzen sondern nur auf eine Sache sich mal gut genug konzentrieren, daher bitte ich einfach mal so um etwas Verstäniß falls nötig.

Danke für die Aufmerksamkeit.
 
Maik hat gesagt.:
Click through flyout menu wäre ein Kandidat, was die scripttechnische Umsetzung betrifft. Das Erscheinungsbild ist letztlich nur eine Frage der CSS-Formatierung :)

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

Hallo,

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.

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 Tooltip Test</title>
<style type="text/css">

.linkk{
  display: block;
  border:1px solid #000;
}

.nav a {
	display: block;
  width:200px;
	position: relative;
	background: #FFFF00;
}

.nav a:hover {
  background: #00FF00;
}

.nav a .tooltip {
	display: block;
	width:200px;
	background:#3F00FF;
  border:1px solid #000;
	position: absolute;
	top: 0px;
	left: -5000px;
	z-index: 10;
  visibility: hidden;
}
.nav a:hover .tooltip {
	left:200px;
  visibility: visible;
}
.nav a:active .tooltip {
	left:200px;
  visibility: visible;
}
.nav a:focus .tooltip {
	left:200px;
  visibility: visible;
}
</style>
</head>
<body>
<div class="nav">
	<a href="#nogo">
	<span class="linkk">Link</span>
	<span class="tooltip">Tooltip</span>
	</a>
</div>

</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück