• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tooltip

A

abcxx

Neues Mitglied
Hi,

skript habe ich von hier

1. wie kann ich das pfeil nach links verschieben so das es nach links zeigt?
2. wie kann man den rand ändern das es so aussieht: b.png und nicht so: a.png.
3. ist das ganze nur mit HTML und CSS ohne JavaScript möglich?

CSS:
Code: 
.balloonstyle{
position:absolute;
top: -500px;
left: 0;
padding: 5px;
visibility: hidden;
border:1px solid white;
font:normal 12px Arial;
line-height: 18px;
z-index: 100;
background-color: #2a2a2a;
width: 200px;
color:#FFF;
}

#arrowhead{
z-index: 99;
position:absolute;
top: -500px;
left: 0px;
visibility: hidden;
}
 
Hallo,

und willkommen im Forum.
Viele Fragen daher der Reihe nach.

Tooltips kann mehr sehr gut nur mit CSS umzusetzen. Zeige deinen Html Code und wo der Tooltip mit einem Beispieltext erscheinen soll, damit man gezielter helfen kann. Der CSS-Code muss natürlich auch hier rein und zwar komplett.

Den Pfeil in deinem Beispiel kannst du nicht einfach verwenden und links an den Rand des Kastens schieben, da es sich um eine Grafik handelt. Du brauchst bei diesem Beispiel eine neue Pfeil-Grafik. Die ist aber einfach zu erstellen, da du ja nur in einem Grafikprogramm die Pfeilgrafik laden musst und dann um 90 Grad entgegen dem Urhzeigersinn einmal drehen und wieder neu abspeichern musst.

Die Linie ist der Rahmen in Weiss zu dem Kasten. Wenn der Pfeil mit dem Kasten abschliessen soll aber der Rahmen erhalten bleiben soll, dann musst du den Wert von top bei der ID arrohead auf 499px ändern. Soll der Rahmen auch verschwinden, dann nimmst du einfach border bei der Klasse balloonstyle raus und lässt den Wert bei top zu arrowhead unangetastet bei 500px stehen.
 
Wenn der Pfeil mit dem Kasten abschliessen soll aber der Rahmen erhalten bleiben soll, dann musst du den Wert von top bei der ID arrohead auf 499px ändern.
Zum Vergrößern anklicken....
klappt nicht :( ich habe folgendes probiert: top: -499px, -500px, -501px, 499px, 500px, 501px.
wie es aussieht bringt nur position bei #arrowhead was den rest kann man beliebig verändern oder löschen. :D

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tooltip</title>
<link rel="stylesheet" type="text/css" href="balloontip.css" />
<script type="text/javascript" src="balloontip.js"></script>
</head>

<body style="background-color:#ebebeb">
<a href="http://www.bmw.de/de/de/index.html" rel="balloon1" class="button inline-block">Bayerische Motoren Werke</a>

<div id="balloon1" class="balloonstyle">
<img src="http://autoranchmotors.com/Images/Logos/icon-bmw.png" style="float: right; margin-left: 5px" />Die Bayerische Motoren Werke Aktiengesellschaft (BMW AG) ist die Muttergesellschaft der BMW Group mit der Automobil- und Motorrad-Marke BMW, MINI und Rolls-Royce sowie den Submarken BMW M und BMW i. Der Hauptsitz des Unternehmens befindet sich in München. Die Aktie des Unternehmens ist im DAX an der Frankfurter Wertpapierbörse notiert.
</div>
</body>
</html>
CSS war eigentlich komplett :D aber ich habe es jetzt bisschen verschönert ;) (.balloonstyle und #arrowhead gehören zum skript ;))
Code: 
.balloonstyle{
    position:absolute;
    top: -500px;
    left: 0;
    padding: 5px;
    visibility: hidden;
    border:1px solid white;
    font:normal 12px Arial;
    line-height: 18px;
    z-index: 100;
    background-color: #2a2a2a;
    width: 200px;
    color:#FFF;
}

#arrowhead{
    z-index: 99;
    position:absolute;
    top: -500px;
    left: 0px;
    visibility: hidden;
}

.button {
    background: none repeat scroll 0 50% transparent;
    border-color: transparent;
    border-radius: 2px 2px 2px 2px;
    border-style: solid;
    border-width: 1px;
    color: #444444;
    cursor: default;
    font:bold 12px Arial;
    height: 24px;
    line-height: 24px;
    padding: 6px;
    text-decoration: none;
    text-align:center;
    width:200px;
}

.button:hover {
    background-color:#F8F8F8;
    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
    border-color:#C6C6C6;
    color: #222222;
    cursor: default;
    font:bold 12px Arial;
    height: 24px;
    line-height: 24px;
    padding: 6px;
    text-decoration: none;
    text-align:center;
    width:200px;
}

.inline-block {
    display: inline-block;
    position: relative;
}
balloontip.jshttp://www.dynamicdrive.com/dynamicindex5/balloontip.js

Live Demo
wie mach ich es jetzt so das der kasten rechts vom text erscheint und pfeil nach links zeigt?
 

Anhänge

  • arrowleft.gif
    arrowleft.gif
    1,5 KB · Aufrufe: 31
  • arrowup.gif
    arrowup.gif
    1,5 KB · Aufrufe: 31
Zuletzt bearbeitet:
... kann keiner helfen?? ist es so schwer 2 zeilen code zu schreiben??
 
Zuletzt bearbeitet:
Wenn es nicht schwer ist warum machst du es nicht selber?


Hier hast du ein komplettes Beispiel, wie man Tooltips ohne Grafiken und ohne Javascript erstellt.
Müsste in allen Browsern gehen, ist ja nichts besonderes.
HTML: 
<!DOCTYPE html>
<html lang="de">    
    <head>        
        <meta charset="utf-8">        
        <title>Titel der Seite
        </title>        
                                        
<style>
/* Tooltip beginnt hier */
a.tooltip {
    color: #c00;
}
a.tooltip em {
    display: none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration: none;
}
/* Box mit Text */
a.tooltip:hover em {
    display: block;
    position: absolute;
    top: -10px;
    left: 55px;
    padding: 5px;
    font-weight: normal;
    font-style:normal;
    color: #000;
    border: 1px solid red;
    background: #ffc;
    width: 150px;
}
/*  Pfeil von Box */
a.tooltip:hover em i {
    position: absolute;
    left:-22px;
    top: 10px;
    width: 0px;
    height: 0px;
    background: #fff;
    display: block;
    font-size: 1px;
    Border: 10px solid transparent;
    Border-right: 12px solid red;
}
</style>             
    </head>    

    <body>
        <h1>Beipiel für Tooltip ohne Grafitk und ohne Javascript</h1>       
        <p>Lorem ipsum dolor sit amet 
            <a class="tooltip" href="">Boudin <em>
                    <i>
                    </i>One of the first French landscape painters to paint in the open air.</em></a>consectetuer enim rhoncus cursus Nam Curabitur. Cursus Vestibulum congue Sed sed Quisque nibh vitae dui montes augue. Parturient egestas wisi et turpis a massa <a class="tooltip" href="">gravida interdum ante ligulaem <em><i></i>Tooltip Beispiel. Ohne Grafik.</em></a>. Sed enim justo volutpat lacus ut elit justo eu mauris consequat. 
        </p>
   </body>
</html>
 
Wenn es nicht schwer ist warum machst du es nicht selber?
Zum Vergrößern anklicken....
weil ich das nicht kann ;)

wie ich ein pfeil ohne grafik erstelle habe ich schon herausgefunden, aber es sieht häslich aus :)

weiß du was ich bei mir ändern muss damit es so wie in deinem beispiel aussieht?

kasten rechts, pfeil links und rahmen um den pfeil

Tooltip <- so sieht es momentan aus
 
So habe mal alles ein wenig verschönert, jetzt sieht der Pfeil besser aus, er war vorher durch meine Spielerei nicht symmetrisch.

Dein Code ist hier CSS und HTML zusammen in einer Datei:

HTML: 
<!DOCTYPE html>
<html lang="de">    
    <head>        
        <meta charset="utf-8">        
        <title>Titel der Seite
        </title>        
                                        
<style>
/* Tooltip beginnt hier */
a.tooltip {
    color: #444444;
    
    font:bold 12px Arial;
    height: 24px;
    line-height: 24px;
    padding: 6px;
    text-decoration: none;
    text-align:center;
    width:200px;
    border: 1px solid transparent;
    border-radius: 2px;
}
a.tooltip em {
    display: none;
}
a.tooltip:hover {
    position: relative;
    z-index:500;
    text-decoration: none;
    background-color:#F8F8F8;
    border-color:#C6C6C6;
    color: #222222;
}

/* Box mit Text */
a.tooltip:hover em {
    display: block;
    position: absolute;
    top: -10px;
    right: -224px;
    padding: 5px;
    font-weight: normal;
    font-style:normal;
    color: #000;
    border: 1px solid black;
    background: #ffc;
    width: 200px;
}

/*  Pfeil von Box */
a.tooltip:hover i {
    position: absolute;
    left:-12px;
    top: 10px;
    width: 0px;
    height: 0px;
    background: transparent;
    display: block;
    font-size: 1px;
    border: 10px solid transparent;
    border-right: 10px solid black;
    border-left:0px;
}
</style>             
</style>             
    </head>    

    <body>
    <a class="tooltip" href="http://www.bmw.de/de/de/index.html">Bayerische Motoren Werke
     <em><i></i>Die Bayerische Motoren Werke Aktiengesellschaft (BMW AG) ist die Muttergesellschaft der BMW Group mit der Automobil- und Motorrad-Marke BMW, MINI und Rolls-Royce sowie den Submarken BMW M und BMW i. Der Hauptsitz des Unternehmens befindet sich in München. Die Aktie des Unternehmens ist im DAX an der Frankfurter Wertpapierbörse notiert.</em></a>

   </body>
</html>

Links sehen normalerweise so aus <a>Lintktext </a>
Hinzu kommt jetzt nach dem Linktext der Tooltip <a>Lintktext <em><i></i>Text vom Tooltip</em></a>
Die Tags <i></i> sind heir nur für den Pfeil, wennman die weglässt ist auch der Pfeil weg und es bleibt ein Kasten mit Text und Rahmen.
Die Position des Tooltip, Grösse, Farbe alles ist anpassbar.

Ich hoffe der Rest ist selbst erklärend, da reines CSS ohne Tricks.

Edit: Habe noch mal den Pfeil überarbeitet, da er im FF und Opera nicht mit Transparenz klarkommt, jetzt sieht es gut aus.
 
Zuletzt bearbeitet von einem Moderator:
sehr schön danke. :P es funktioniert! 8-) aber pfeil ist nicht transparent :( und wie mache ich einen rahmen um den pfeil?

Tooltip

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tooltip</title>
</head>    
<style>
.inline-block {
    display: inline-block;
    position: relative;
}

.tooltip {
    background: none repeat scroll 0 50% transparent;
    border-radius: 2px;
    border: 1px solid transparent;
    color: #444444;
    cursor: default;
    font:bold 12px Arial;
    height: 24px;
    line-height: 24px;
    padding: 6px;
    text-decoration: none;
    text-align:center;
    width:200px;
    margin:10px;
}

.tooltip .tipbox {
    display: none;
}

.tooltip:hover {
    background-color:#F8F8F8;
    border-radius: 2px;
    border: 1px solid transparent;
    border-color:#C6C6C6;
    color: #222222;
    cursor: default;
    font:bold 12px Arial;
    height: 24px;
    line-height: 24px;
    padding: 6px;
    text-decoration: none;
    text-align:center;
    width:200px;
    /*position: relative;
    z-index:500;*/
}

.tooltip:hover .tipbox {
    display: block;
    position: absolute;
    top: -1px;
    right: -224px;
    padding: 5px;
    border:1px solid white;
    font:normal 12px Arial;
    line-height: 18px;
    text-align:left;
    background-color: #2a2a2a;
    width: 200px;
    color:#FFF;
}

.tooltip:hover .arrow {
    position: absolute;
    left:-10px;
    top: 8px;
    width: 0px;
    height: 0px;
    background: #fff;
    display: block;
    font-size: 1px;
    border: 10px solid transparent;
    border-right: 10px solid #2a2a2a;
    border-left:0px;
}
</style> 
<body style="background-color:#ebebeb; margin:0">
<a href="http://www.bmw.de/de/de/index.html" class="tooltip button inline-block">Bayerische Motoren Werke
    <div class="tipbox">
        <div class="arrow"></div>
        <img src="http://autoranchmotors.com/Images/Logos/icon-bmw.png" style="float: right; margin-left: 5px" />Die Bayerische Motoren Werke Aktiengesellschaft (BMW AG) ist die Muttergesellschaft der BMW Group mit der Automobil- und Motorrad-Marke BMW, MINI und Rolls-Royce sowie den Submarken BMW M und BMW i. Der Hauptsitz des Unternehmens befindet sich in München. Die Aktie des Unternehmens ist im DAX an der Frankfurter Wertpapierbörse notiert.
    </div>
</a>
</body>
</html>
 
aber pfeil ist nicht transparent
Zum Vergrößern anklicken....
Der Pfeil soll ja auch nicht transparent sein, sonst könnte man ihn ja auch gleich weglassen. Der Pfeil ist aus einem Blockelement ohne Grösse erstellt. Es ist der rechte Rahmen eines Blockelementes der den Pfeil bildet, eigentlich ein gleichseitiges Dreieck. Da es bereits ein Blockelement ist und zu dem auch noch der rechte Rahmen, kann man da eigentlich keinen Rahmen mehr drum machen. Wozu überhaupt ein Rahmen um den kleinen Pfeil sein muss erschliesst sich mir nicht, Sieht das so nicht besser aus. Aber es geht, wenn man unbedingt einen Rahmen braucht. Du weisst bestimmt jetzt auch wie, oder?

Ich habe aber auch noch Fragen.
Ich habe dir einen gut zu schreibenden kurzen Code geliefert um ein Tooltip zu erzeugen. Warum bläst du den Code unnötig auf und ersetzt die kurzen Elemente I und em durch 2 mal divs mit einer Klasse?

und warum schriebst du das hier:

class="tooltip button inline-block"
wenn class="tooltip" doch ausreicht?
Du kannst alle CSS-Werte die du dem Element a geben willst doch einfach bei tooltip mit reinschreiben.

Gegen Divirites hilft übrigens lesen von CSS Tutorials, denn es gibt mehr als nur Divs in HTML. Siehe HTML5 Doctor, helping you implement HTML5 today
 
Der Pfeil soll ja auch nicht transparent sein, sonst könnte man ihn ja auch gleich weglassen.
Zum Vergrößern anklicken....
ich meine es ist wie ein viereck pfeil schwarz rest weiß, wie kriege ich das weiße weg?

class="tooltip button inline-block"
Zum Vergrößern anklicken....
button - das war der name von tooltip bei mir hab es dan in tooltip geändert und hab vergessen button zu entfernen :)
inline-block - hab es jetzt nach tooltip verschoben ;)

Ich habe aber auch noch Fragen.
Ich habe dir einen gut zu schreibenden kurzen Code geliefert um ein Tooltip zu erzeugen. Warum bläst du den Code unnötig auf und ersetzt die kurzen Elemente I und em durch 2 mal divs mit einer Klasse?
Zum Vergrößern anklicken....
ich finde divs besser :) <em> und <i> sind doch für was anderes da 8-)
 
Zuletzt bearbeitet:
Du änderst die Hintergrundfarbe auf transparent vom Pfeil:

HTML: 
.tooltip:hover .arrow {
    position: absolute;
    left:-10px;
    top: 8px;
    width: 0px;
    height: 0px;
    background: transparent;
    display: block;
    font-size: 1px;
    border: 10px solid transparent;
    border-right: 10px solid #2a2a2a;
    border-left:0px;
}

<em> und <i> sind doch für was anderes da
Zum Vergrößern anklicken....
So? Für was denn?
 
so pfeil ist jetzt transparent und hat einen rahmen
icon_cool.gif


aber ich möchte das sobal man den zeiger von knopf entfernt soll tipbox verschwinden und nicht als link funktionieren

jetzt ist es so: wenn man schnell den zeiger auf tipbox bewegt bleibt es da und wenn man drauf drückt folgt man dem link

Tooltip

So? Für was denn?
Zum Vergrößern anklicken....
um den text kursiv zu machen ;ugl

http://www.mediaevent.de/xhtml/em.html
 
so pfeil ist jetzt transparent und hat einen rahmen
Zum Vergrößern anklicken....
Sieht doch schon sehr schick aus.


aber ich möchte das sobal man den zeiger von knopf entfernt soll tipbox verschwinden und nicht als link funktionieren
Zum Vergrößern anklicken....
Das musst du noch mal genauer erklären.

Wenn ich mit der Maus über den Button mit dem Link fahre öffnet sich der Tooltip. Gehe ich weg, verschwindet der Tooltip.

Welchen Browser verwendest du zum testen?
Du solltest immer erst im FF testen, danach auch die anderen Browser.

um den text kursiv zu machen
Zum Vergrößern anklicken....
Da irrst du dich. Das wird alles im CSS festgelegt. Semantisch gesehen ist das i-Element eine Auszeichnung für die englische Sprache für Namen von Schiffen beispielsweise oder ein Wort in einer anderen Sprache oder ein Gedanke. Da das hier nicht der Fall ist habe ich die Semantik des I-Elementes auf Informationspfeil geändert. Em steht für emphasis und zeichnet Text aus der eine hervorgehobene Bedeutung hat und ist der Tooltiptext gewesen. Alles sehr semantisch und korrekt.
siehe auch: HTML5
 
Das musst du noch mal genauer erklären
Zum Vergrößern anklicken....
veruchmal mit der maus gleich von button auf tipbox zu fahren es verschwindet nicht obwohl man nicht mehr auf dem button ist :)

und wenn du auf tipbox bist kanst du auch drauf klicken :D und es öffnet sich die seite vom button das möchte ich nicht ;)
 
veruchmal mit der maus gleich von button auf tipbox zu fahren es verschwindet nicht obwohl man nicht mehr auf dem button ist
Zum Vergrößern anklicken....
Ein normales Verhalten der Browser. Nicht zu ändern.

und wenn du auf tipbox bist kanst du auch drauf klicken
icon_biggrin.gif
und es öffnet sich die seite vom button das möchte ich nicht
Zum Vergrößern anklicken....
Baue ein Div um das ganze und nenne es class="tooltip"
Ändere deinen Doctype auf html sonst kann es sein das es nicht geht. Musst du ausprobieren.
Nimm aus dem a die klasse ganz raus.

HTML: 
<div class="tooltip">
    <a href="http://www.bmw.de/de/de/index.html">Bayerische Motoren Werke     
        <div class="tipbox">        
            <div class="arrow2">
            </div>        
            <div class="arrow">
            </div>        
            <img src="http://autoranchmotors.com/Images/Logos/icon-bmw.png" style="float: right; margin-left: 5px" />Die Bayerische Motoren Werke Aktiengesellschaft (BMW AG) ist die Muttergesellschaft der BMW Group mit der Automobil- und Motorrad-Marke BMW, MINI und Rolls-Royce sowie den Submarken BMW M und BMW i. Der Hauptsitz des Unternehmens befindet sich in München. Die Aktie des Unternehmens ist im DAX an der Frankfurter Wertpapierbörse notiert.     
        </div></a>
</div>

Wenn du an deinem CSS nichts geändert hast, kannst du es wohl so lassen und müsste den gewünschten Effekt liefern, bis auf dass die Tooltip Box beim überfahren der Maus stehen bleibt bis man den Bereich komplett verlässt.
 
Baue ein Div um das ganze und nenne es class="tooltip"
Zum Vergrößern anklicken....
hat nicht geklappt, ist auch egal ich habe es so gemacht:
Code: 
.tooltip .tipbox:hover {
    display: none;
}

schau mal
icon_cool.gif


das wars eigentlich danke für deine hilfe.

aber ich habe noch eine frage zu deinem code
Code: 
a.tooltip:hover {     
     position: relative;     
     z-index:500;

...
bei mir funktioniert es ohne position und z-index
Code: 
.tooltip:hover {
    background-color:#F8F8F8;
    border-radius: 2px;
    border: 1px solid transparent;
    border-color:#C6C6C6;
    color: #222222;
    cursor: default;
    font:bold 12px Arial;
    height: 24px;
    line-height: 24px;
    padding: 6px;
    text-decoration: none;
    text-align:center;
    width:200px;
    [COLOR=#ff3399]/*position: relative;
    z-index:500;*/[/COLOR]
}
wird es für irgendwas benötigt?
 
Der Tooltip kam ursprünglich aus einem anderen Einsatz mitten im Text und war auch etwas anders geschrieben, das sind halt Reste, die noch übrig geblieben waren, teste es aber in allen gängigen Browsern bevor du es raus nimmst.
Der Z-Index war glaube ich für den IE6 gedacht, der hatte ja mehrere Macken, ist aber Geschichte.

Noch etwas:
Wenn du deinen Text als UTF8 speicherst kannst du ganz normal die Umlaute verwenden und brauchst nicht die HTML Entietäten zu verwenden.
Auf lange Sicht würde ich mir auch einen Webspace gönnen, die 149 Cent im Monat kann wohl jeder aufbringen und dann hat man nicht immer die Werbung von funpic eingeblendet.
 
Hinweis: der Zeichensatz einer Webseite die auf einem Server liegt und per http erreichbar ist, wird nicht einzig durch diesen Meta-Tag bestimmt. Der Server selbst liefert im Header auch einen Zeichensatz mit der für Browser vorrang hat. Solltest Du Probleme mit der Darstellung von Zeichen haben, prüfe erst das (z.B. bei Firefox -> Rechtsklick auf Seite -> Seiteneigenschaften).
Zum Vergrößern anklicken....

- Internationalisierung

Da ist auch ein Tool verlinkt, mit dem du das checken kannst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben