Tooltip

Mahriel · 15 Mai 2013

Hallo :)

Ich hab mir heute ein kleines Tooltip gegooglet und soweit würde es auch funktionieren.. Wenn ich nur einen Text im Div habe. Nun habe ich aber im Div eine Verlinkung und ich schätze daran liegts, dass es nicht funktioniert.

Kann mir da jemand helfen?

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;
}

Tooltip

Mahriel

Neues Mitglied

Neueste Beiträge