Tooltip mit "class" und "onclick" realisieren.

Zenti

Zenti

Erfahrenes Mitglied
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.

HTML: 
<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
 
Hi Crack :)
Mein Retter in der Not :P

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.
 
Zuletzt bearbeitet:
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:
Code: 
    $(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();
      });
    });
 
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 :D

Nochmal Danke an Crack! Hammer Lösung :)
Grüße. ;-)
 
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!?*

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>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>
     .....

Code: 
.detail-tooltip {
	display: none;
	width: 148px;
	height: 148px;
	background-color: #099;
	margin-left: 300px;
	margin-top: 250px;
}
 
Zuletzt bearbeitet:
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.
 
Dein Quelltext müsste so aussehen:
HTML: 
<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>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück