Hallo,
heute habe ich für euch ein jQuery Script welches euch ermöglicht Tooltips auf ein beliebiges Element anzuwenden. Hier ein Beispiel dazu.
Das Script
Also wir benötigen erstmal jQuery in unserem HTML Dokument. Von jQuery binde ich meistens die latest min Version ein:
<script src="http://code.jquery.com/jquery-latest.min.js"></script> |
Als nächstes schreiben wir folgendes Script in den head-Bereich:
<script> $(document).ready(function(){ // Wenn das Dokument fertig geladen ist $(document).mousemove(function(e){ // Wenn sich die Maus Bewegt $('#tooltip').css('left',e.clientX +10); // Setze die X-Position des Tooltips auf die Pos der Maus + 10 $('#tooltip').css('top', e.clientY+10); // Setze die Y-Position des Tooltips auf die Pos der Maus + 10 }); $('*').mouseover(function(){ // Wenn die Maus ein Beliebiges Element betritt if($(this).attr('tooltip') != null) // Prüfe ob das Element ein Attribut tooltip hat { $('#tooltip').html($(this).attr('tooltip')); // Setze den Text des Tooltips auf den des Attributes $('#tooltip').fadeIn(); // Zeige das Tooltip an } }); $('*').mouseleave(function(){ // Wenn die Maus das Element verlässt $('#tooltip').css('display', 'none'); // Verstecke den Tooltip wieder }); }) </script> |
Das wäre schonmal das Script für die Steuerung des Tooltips. Jetzt noch ein bisschen hübsch machen =)
<style> #tooltip { background-color: rgba(37,37,37,0.95); border: 1px solid #191919; border-radius: 3px; padding: 5px 10px ; color:white; position: fixed; display:none; } span { cursor:help; font-weight: bold; font-size:18px; } </style> |
So, jetzt müssen wir im Bodybereich nurnoch ein div mit der ID tooltip anlegen und den Text mit tooltips Ausstatten:
<body> <div id='tooltip'></div> Dieser Text hat <span tooltip="Das ist ein Tooltip">Tooltips</span> welche mit <span tooltip="jQuery ist eine tolle Bibliothek">jQuery</span> auf Elemente mit einem <span tooltip="tooltip='Das ist ein Tooltip'">Tooltip-Attribut</span> angewendet werden. </body> |
Alles nochmal Zusammengefasst
<html> <head> <title>jQuery Tooltip by http://developer-heaven.de/</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function(){ // Wenn das Dokument fertig geladen ist $(document).mousemove(function(e){ // Wenn sich die Maus Bewegt $('#tooltip').css('left',e.clientX +10); // Setze die X-Position des Tooltips auf die Pos der Maus + 10 $('#tooltip').css('top', e.clientY+10); // Setze die Y-Position des Tooltips auf die Pos der Maus + 10 }); $('*').mouseover(function(){ // Wenn die Maus ein Beliebiges Element betritt if($(this).attr('tooltip') != null) // Prüfe ob das Element ein Attribut tooltip hat { $('#tooltip').html($(this).attr('tooltip')); // Setze den Text des Tooltips auf den des Attributes $('#tooltip').fadeIn(); // Zeige das Tooltip an } }); $('*').mouseleave(function(){ // Wenn die Maus das Element verlässt $('#tooltip').css('display', 'none'); // Verstecke den Tooltip wieder }); }) </script> <style> #tooltip { background-color: rgba(37,37,37,0.95); border: 1px solid #191919; border-radius: 3px; padding: 5px 10px ; color:white; position: fixed; display:none; } span { cursor:help; font-weight: bold; font-size:18px; } </style> </head> <body> <div id='tooltip'></div> Dieser Text hat <span tooltip="Das ist ein Tooltip">Tooltips</span> welche mit <span tooltip="jQuery ist eine tolle Bibliothek">jQuery</span> auf Elemente mit einem <span tooltip="tooltip='Das ist ein Tooltip'">Tooltip-Attribut</span> angewendet werden. </body> </html> |
Danke fürs lesen und bitte Bewerten nicht vergessen =)
Gruß,
Julian
557x gelesen
