Tooltip als Menü Nutzen

Tooltip als Menü Nutzen

Der Tooltip und jQuery sind schon feine Sachen, aber in manchen Punkten hackt es mit den einfachsten CSS Befehlen. So z.b. wenn man den Tooltip auf der Seite in eine Fixe oder Zentrierte Position bringen will. Wir hatten selbst genug Probleme mit diesem Phänomen. Bei der Codierung der Seite haben wir den Tooltip schön ausgerichtet, doch beim Kontrollieren auf einem anderen Rechner, sind wir bald umgefallen. Das Menü wollte einfach nicht auf Position bleiben. Bei einer kleineren Auflösung ist das Menü immer nach Links verschoben worden. Bei einer  größeren Auflösung nach rechts. Da war der schöne Effekt gleich mal wieder hin.

Original

[sourcecode language=“java“]
$(document).ready(function() {
// enable tooltip for "download" element. use the "slide" effect
$("#download_now").tooltip({ effect: ’slide‘});
});
[/sourcecode]

Nach einigem Suchen im www und probieren von befehlen sind wir aber dann doch auf die Lösung gekommen. Da wir schon eine Anfrage bekommen haben wie das den nun Funktioniert schreiben wir einfach hier eine kleines Tutorial wie wir es gemacht haben.

demo Download

Das solltet Ihr Laden.

1. FULL jQuery

2. tooltip_menu.js

3.Tooltip_menu.css

Oder das Komplette Paket

Wir haben als erste die .js Datei mal aufgemotzt Indem wir noch ein paar Funktionen und Änderungen eingebracht haben. Damit der Tooltip endlich auf einer Angegebenen Position Bleibt.

Technorati-Tags: Tooltip,center,fix,positions,jquery

Damit alles am richtigen Platz erscheint mussten wir ein paar Classen einfügen.

Bearbeitet

[sourcecode language=“java“]
$(document).ready(function (){

$(document.body).addClass(‚js‘);
$("ul#Navigation a").tooltip();
(function () {
var animating = false;
var Item = $("ul#Navigation > li");
var Tooltip = Item.children
(‚div.b1,div.b2,div.b3,div.b4‘); // Here is the Container
function resetCss(el) {
el.css({
visibility: ‚visible‘
});
}
Item.each(function (numItems) {
var Items = $(this);
var Tooltip_over = Tooltip.eq(numItems);
Items.hover(function (e) {
if (animating) {
Tooltip.stop().hide();
resetCss(Tooltip);
Tooltip_over.show();
animating = false;
} else {
Tooltip_over.fadeIn(0);
// If you use PNG Background, dont fade, IE cant show this
animating = true;
}
}, function (e) {
animating = true;
Tooltip_over.stop();
resetCss(Tooltip_over);
Tooltip_over.fadeOut(0).queue(function ()
{ // If you use PNG Background, dont fade, IE cant show this
animating = false;
Tooltip.dequeue();
});
});
});
})();
});

[/sourcecode]

Auch die CSS Datei hat einiges dazu bekommen, um aber das gewünschte Resultat zu erreichen, haben wir die Container in der CSS wie folgt, bestückt.

[sourcecode language=“css“]
b1{
background:url(‚../images/white_arrow.png‘);
background-repeat:no-repeat;
background-position:top;
margin: 0px 0px 0px -9px;
display:none;
width:1000px;
min-height: 300px;
z-index:0!important;

}

.b2{
background:url(‚../images/white_arrow2.png‘);
background-repeat:no-repeat;
background-position:top;
margin: -300px 0px 0px -257px;
display:none;
width:1000px;
min-height: 300px;
z-index:0!important;

}

.b3{
background:url(‚../images/white_arrow3.png‘);
background-repeat:no-repeat;
background-position:top;
margin: -300px 0px 0px -505px;
width:1000px;
display:none;
min-height: 300px;
z-index:0!important;

}

.b4{
background:url(‚../images/white_arrow4.png‘);
background-repeat:no-repeat;
background-position:top;
margin: -300px 0px 0px -753px;
width:1000px;

/* Ganz Wichtig==
Hier drückt Ihr die Buttons in die Richtige Position */

ul#Navigation {
width:1000px;
margin:-30px auto;
position:absolute;
list-style-type: none;
height:auto;
}
ul#Navigation li {
float:left;
width:232px;
vertical-align:top;
margin:0px 8px 0px 8px;
}
[/sourcecode]

Mit den – Werten haben wir es dann endgültig geschafft die “UL” in die richtige Position zu drücken. Anschließend seht Ihr den Teil der für Eure Html Datei ist.

[sourcecode language=“html“]
<!– ######### Tooltip Menu ################–>
<ul class="clearfix" id="Navigation">
<li class="first">
<div class="topmenuhover"><a class="overall" href="#" title="title" >First Button</a></div>
<div class="b1">
<div class="mover">
<div class="clearfix innermover">
<div class="overlayer1">
<img src="/demo//images/Alu_Erase.png" width="128" height="128" title="Image" alt="Image" align="left" />
<h3 > Example Tooltip 1</h3>
<div >Write your Text here! Why do this move down? You con Change this in CSS Flie
</div>
</div>
<div class="clearfix lister">
<div class="toplink"><a href="#"><span>Menu Button 1</span></a></div>
</div>
</div>
</div>
</div>
</li>
<li class="first">
<div class="topmenuhover"><a class="overall" href="#" title="">Second Button</a></div>
<div class="b2">
<div class="mover">
<div class="clearfix innermover">
<div class="overlayer1">
<img src="/demo//images/Alu_HD_SCSI.png" width="128" height="128" title="Image" alt="Image" align="left" />
<h3>Text here</h3>
<div > Here we go</div>
</div>
<div class="clearfix lister">
<div class="toplink"><a href="#"><span>Menu Button 1</span></a></div>
</div>
</div>
</div>
</div>
</li>
<li class="last">
<div class="topmenuhover"><a class="overall" href="#" title="">Make one more</a></div>
<div class="b3">
<div class="mover">
<div class="clearfix innermover">
<div class="overlayer">
<img src="/demo//images/Alu_HD_Tools.png" width="128" height="128" alt="Image" title="Image" align="right" />
<h3>Am Puls der Zeit !!</h3>
one more
</div>
<div class="clearfix lister">
<div class="toplink"><a href="#"><span>Menu Button 1</span></a></div>
</div>
</div>
</div>
</div>
</li>
<li class="last">
<div class="topmenuhover"><a class="overall" href="#" title="">Last</a></div>
<div class="b4">
<div class="mover">
<div class="clearfix innermover">
<div class="overlayer">
<img src="/demo//images/Alu_DVD-RW.png" width="128" height="128" alt="Image" title="Image" align="right" />
<h3>Write something in</h3>
And now the Last
</div>
<div class="clearfix lister">
<div class="toplink"><a href="#"><span>Menu Button 1</span></a></div>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="cleared"></div>
<!– ############################## Tooltip Menu End #####################################–>
[/sourcecode]

Wenn Ihr jetzt die einzelnen Schritte wissen möchtet, Schade…. Keine Ahnung mehr. Wir haben keine Notizen gemacht. Am besten Ladet Ihr Ihr das Paket runter und Probiert dann bis es passt.

Teile uns

Schreibe einen Kommentar

Über WAM

Die WAM - Webagentur-Meerbusch. Die Typo3 und Wordpress Agentur aus Meerbusch bei Düsseldorf in NRW. Ganz nach dem Motto: Wenn man es ins Netz stellen kann, können wir es bauen. Und das schon seit über 10 Jahren.

-
Das Archiv
Werbung
Haendlerbund_Leistungen_265x221_animiert
Datenschutz-Übersicht
logo_wam_gray

Hier können Sie einstellen welche Cookies unsere Webseite auf Ihrem Endgerät speichern „Local Storage“ darf. Diese werden beim nächsten besuch auf unserer Webseite reaktiviert. Diese Einstellungen können Sie jederzeit wieder ändern. Dazu klicken Sie unten Links auf das Zahnradsymbol.

Sie können die Cookies nach dem Besuch unserer Webseite natürlich auch bedenkenlos löschen. Dazu müssen Sie die entsprechenden Einstellungen in Ihrem Browser vornehmen.

Unbedingt notwendige Cookies

Unbedingt notwendige Cookies sollten jederzeit aktiviert sein, damit wir deine Einstellungen für die Cookie-Einstellungen speichern können.

  • pll_language .

Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr

  • reCAPTCHA ist ein CAPTCHA-System,

das es Webhostern ermöglicht, zwischen menschlichen und automatisierten Zugriffen auf Websites zu unterscheiden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten:
KlickpfadSichtbarkeit von Anzeigen messenMausbewegungZeitstempelKlicks auf Anzeigen verfolgenConversion-TrackingIPUhrzeit und Datum verfolgenVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.
Cookies, die in Ihrem Browser gesetzt werden Cookiename Beispielwert Ablaufzeit Typ Domain rc::a MjNxdWs3M2o5ZGt­x Persistent Funktion www.google.com

  • Google Fonts

ist ein Dienst, der es Websites ermöglicht, bestimmte Schriftarten für ihre Gestaltung zu verwenden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

  • Google Maps

ist ein von Google entwickeltes Web-Mapping-Produkt.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten
Betrugserkennung und -präventionSichtbarkeit von Anzeigen messenZeitstempelIPUhrzeit und Datum verfolgenVerfolgen des BenutzergerätsVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.

Drittanbieter-Cookies

Diese Website verwendet Google Analytics, um anonyme Informationen wie die Anzahl der Besucher der Website zu sammeln.

Betreibergesellschaft der Google-Analytics-Komponente ist die Google Inc., 1600 Amphitheatre Pkwy, Mountain View, CA 94043-1351, USA.

Name des Cookies: _ga
Inhalte: GA1.2.1970440283.1622365906
Ablaufdatum des Cookies : 1 Jahr - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gat_gtag_UA_1602708_1
Inhalte: 1
Ablaufdatum des Cookies : 1 Minute - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gid
Inhalte: GA1.2.1949554392.1622365906
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Name des Cookies: chimpstatic
Inhalte: E-Mail Adresse bei Newsletter anmeldung
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Zusätzliche Cookies

Diese Website verwendet die folgenden zusätzlichen Cookies:

Name des Cookies: pll_language
Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr - Nur bei sicheren Verbindungen zur gleichen Website

Name des Cookies: moove_gdpr_popup
Cookie zur Speicherung der Funktion der Cookieseinstellung - Ablaufdatum 1 Jahr - Nur bei Verbindungen zur gleichen Website