Allgemein CSS 3 jQuery Tutorials

[jQuery] Tooltips für ein beliebiges Element

Kommentare deaktiviert für [jQuery] Tooltips für ein beliebiges Element

Hallo,

heute habe ich für euch ein jQuery Script welches euch ermöglicht Tooltips auf ein beliebiges Element anzuwenden. Hier ein Beispiel dazu.

jQuery_Tooltip
Tooltips sind oft eine Hilfe für den Benutzer.

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

Print Friendly, PDF & Email