# Tooltip mit "class" und "onclick" realisieren.



## Zenti (6. Mai 2013)

Hallo,

ich habe mich jetzt schon einige Tage durch das Web gewühlt und komme einfach nicht auf eine Lösung.
Ich möchte einen Tooltip realisieren der auf class="" reagiert.
Warum möchte ich das? Ich möchte ihn sehr oft verwenden und nicht jedes mal eine neue ID vergeben.


```
<div class="mein_tooltip_icon" onclick="tooltipScript();"></div>
<div class="das_wird_nach_onclick_angezeigt" style="display:none;"></div>
```

Außerdem soll der Tooltip nicht per MouseOver erscheinen sondern bei einem OnClick event.
Kann mir dazu irgend jemand Hilfestellung geben? Das wäre sehr nett 

Ich komm einfach nicht drauf -.-
Danke nochmal.

mit besten Grüßen,
Zenti


----------



## Parantatatam (6. Mai 2013)

Meinst du so etwas? http://jsbin.com/obosuv/1/edit#live,javascript


----------



## Zenti (6. Mai 2013)

Hi Crack  
Mein Retter in der Not 

Sieht schonmal Super aus. Funktioniert auch wenn ich die selbe Klasse an einen anderen Div vergebe  Nice.

http://jsbin.com/obosuv/2/edit

Ich habe vergessen zu erwähnen das der Tooltip sich natürlich schließen soll wenn man nochmal auf das Icon klickt bzw. der Tooltip soll sich schließen bei egal welchem Click Event nach dem öffnen.

Also z.B. 
- Man klickt das Icon an und der Tooltip öffent sich
- Man klickt irgendwo auf die Seite und der Tooltip verschwindet
ODER
- Man klickt auf ein anderes Icon und der bereits geöffnete Tooltip schließt sich und der neue erscheint. (Dieser schließt sich natürlich auch bei einem weiteren Click Event. (onBlur?)

Ich hoffe ich habe es verständlich erklärt 

Vielen lieben Dank schonmal 

Grüße aus München.


----------



## Parantatatam (6. Mai 2013)

So, jetzt müsste es passen: http://jsbin.com/obosuv/3/edit


----------



## Zenti (6. Mai 2013)

*VIELEN VIELEN DANK !!*
Sehr schöne und einfache Lösung !!
Nice one 

Hast mir wieder mal den ***** gerettet  Danke.

mit vielen lieben Grüßen,
Zenti

*LÖSUNG mit Fade Effekt für andere User:*

```
$(function () {
      $(document).on('click', function (e) {
        if (!$(e.target).is('.giro-tooltip-icon')) {
          $('.giro-tooltip-main').fadeOut();
        }
      });
      $('.giro-tooltip-icon + .giro-tooltip-main').prev().on('click', function () {
        var $this = $(this).next();
        $('.giro-tooltip-main').not($this).fadeOut();
        $this.fadeToggle();
      });
    });
```


----------



## Zenti (6. Mai 2013)

Ich schreibe nochmal, weil ich die Lösung sooo Klasse finde!
Habe wirklich viele Lösungswege im Web hierzu gefunden und alle waren so komplex und
eklig zu implementieren das es ganz aus ist 

*Nochmal Danke an Crack!* Hammer Lösung 
Grüße. ;-)


----------



## Mahriel (15. Mai 2013)

Hi.

Genau sowas hab ich gesucht 
Nur leider funktioniert das bei mir nicht so, wies soll.
Hab die Klasse vergeben, ein neues Div für das Tooltip erstellt und das Script eingebunden, nur irgendwie tut sich da nix.

Hier mal Code und CSS. Vielleicht kann mir ja jemand helfen.

**Edit:* Ok ich hab herausgefunden, dass es am <a> liegt, aber das brauch ich. Hilfe!?*


```
<!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>XXX</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-2.0.0b2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
$(function () {
  $(document).on('click', function (e) {
    if (!$(e.target).is('.tooltip')) {
      $('.detail-tooltip').hide();
    }
  });
  $('.tooltip + .detail-tooltip').prev().on('click', function () {
    var $this = $(this).next();
    $('.detail-tooltip').not($this).hide();
    $this.toggle();
  });
});
</script>

</head>
<body>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="container">
  <div id="startseite">
    <div id="media">
      <div id="englisch"><img src="material/navigation/uk.jpg" /></div>
      <div id="deutsch"><img src="material/navigation/de.jpg" /></div>
      <div id="twitter"><img src="material/navigation/twitter.jpg" /></div>
      <div id="googleplus"><img src="material/navigation/googleplus.jpg" /></div>
      <div id="xing"><img src="material/navigation/xing.jpg" /></div>
    </div>
    <div id="buttons">
      <div id="reihe1">
        <div id="home" class="tooltip"><a href="#">Home</a></div>
        <div class="detail-tooltip">Textbox Bla Bla</div>
        <div id="kontakt"><a href="#">Kontakt</a></div>
        <div id="anfahrt"><a href="#">Anfahrt</a></div>
        <div id="projekte"><a href="#">Projekte</a></div>
        <div id="appsites"><a href="#">Appsites</a></div>
      </div>
     .....
```


```
.detail-tooltip {
	display: none;
	width: 148px;
	height: 148px;
	background-color: #099;
	margin-left: 300px;
	margin-top: 250px;
}
```


----------



## Parantatatam (15. Mai 2013)

Wo soll man drauf klicken und was soll daraufhin eingeblendet werden?


----------



## Mahriel (15. Mai 2013)

Wenn man auf Home (oder Kontakt, Anfahrt,..) klickt, dann soll, weiß nicht, ca. 100px weiter rechts eine Infobox aufgehen (Größe 200px x 400px und hellgrauer Hintergrund, kann ich ja noch ändern) in der ich einen Text reinstellen kann.


----------



## Parantatatam (15. Mai 2013)

Dein Quelltext müsste so aussehen:

```
<div id="reihe1">
  <div id="home">
    <a href="#" class="tooltip">Home</a>
    <div class="detail-tooltip">Textbox Bla Bla</div>
  </div>
  <div id="kontakt">
    <a href="#" class="tooltip">Kontakt</a>
    <div class="detail-tooltip">Textbox bla bla</div>
  </div>
  <!-- ... -->
</div>
```


----------



## Mahriel (15. Mai 2013)

Ah super danke.  Das wars.
Nur noch was. Das Tooltip geht jetzt auf, nur verrutscht es alle anderen Divs. Ich möchte das das Tooltip als oberste Ebene dann sichtbar ist, ohne das etwas verrutscht.?

*Edit:* Danke, ist erledigt. ^^ Kleine Probleme mit dem Z-Index, aber ich habs eh schon geschafft. 
Viel danke nochmal an dich, Crack .


----------



## Zenti (16. Mai 2013)

Du darfst deinen Tooltip nicht auf "float:left" setzen. Du musst für das Tooltip Hauptelement "position:absolute" verwenden.

*Beispiel:*

```
<script src="http://code.jquery.com/jquery-2.0.0b2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<style>
.tooltip-icon {
     float:left;
     background-image:url(/dein/pfad/zum-icon.png);
     width:15px;
     height:15px;
}
.tooltip-layer {
     display:none;
     position:absolute;
     background-image:url(/dein/pfad/zum-tooltip.png);
     width:350px;
     height:200px;
     margin-left:50px; /* Hier kannst du die Position deines Tooltips anpassen. bsp: -25px; (nach Links ) 25px (nach rechts) */
     margin-top:-25px; /* Ebenson,.. nur nach unten oder nach oben,.. einfach mal rum probieren.  */
     z-index:20;  /* Damit bestimmst du die Ebenen. (10 -> 20-> 30,... wie dus halt definiert hast) wenn du noch keinen z-index verwendest, ist es egal wie hoch die Zahl ist,.. Hauptsache höher als eins,.. ich nehm immer 20 oder irgend was hohes,... das nächste element was du bestimmst und drüber liegen soll hat dann z.B. "z-index:50;"  */

}
</style>
<script>
    $(function () {
      $(document).on('click', function (e) {
        if (!$(e.target).is('.tooltip-icon')) {
          $('.tooltip-layer').fadeOut();
        }
      });
      $('.tooltip-icon + .tooltip-layer').prev().on('click', function () {
        var $this = $(this).next();
        $('.tooltip-layer').not($this).fadeOut();
        $this.fadeToggle();
      });
    });
</script>

<div class="tooltip-icon"></div>

<div class="tooltip-layer">
     hier sind deine Tooltip Elemente drin.
</div>
```

Hoffe konnte dir helfen.
Schönen Abend 

Zenti


----------

