Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<div id="page">

	<h1>Colortip - a jQuery Tooltip Plugin</h1>
    
    <h2>Test it by hovering over the links below</h2>
    
	<h2 class="backToTz"><a href="#" class="blue" title="Coded by Yasin Aydın">Yasin Aydın</a></h2>
    
  <div>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget   nisi eu nunc dapibus vestibulum. Aenean id sem nibh, at lacinia diam.   Nunc dictum vulputate sodales. Quisque ante lorem, sodales non accumsan   et, lobortis ut lacus. Aenean vehicula gravida elit id facilisis. In   molestie varius risus, ut viverra nulla mollis non. Duis dictum turpis a   mi convallis eget laoreet metus laoreet. Sed mattis ligula a diam   varius <a href="#" title="The tooltips do not use any images">dignissim</a>. Sed non magna risus, at elementum nunc. Nullam sit   amet massa felis, eget varius purus. Quisque tellus augue, tempor nec   accumsan ac, luctus vel libero. Cras eu tristique quam. </p>
      <p> Donec pharetra aliquam aliquet. Nam <a href="#" title="The script replaces the title attributes of the links with fancy tooltips.">congue</a> congue condimentum.   Suspendisse potenti. Sed et ipsum augue. Nam eu lectus orci, sit amet   suscipit sem. Suspendisse iaculis, orci vel ultricies tristique, sapien   lacus adipiscing dolor, condimentum fermentum magna erat eget elit.   Praesent pellentesque odio et sapien accumsan posuere. Vivamus ut mauris   lorem, sit amet ullamcorper nulla. Maecenas augue enim, sollicitudin   pretium ultrices et, hendrerit interdum enim. Etiam at urna vitae lectus   tincidunt rhoncus. Aliquam a dolor quis sapien viverra <a href="#" title="6 different color themes are available" class="green">ultricies</a> eget a   metus. Curabitur non enim risus. Phasellus nec massa non justo vehicula   consequat. Nulla vulputate enim vel turpis porttitor in sagittis erat   vehicula. Fusce urna odio, dictum quis dapibus vitae, luctus gravida   augue. </p>
      <p> Integer commodo lectus id risus semper ut interdum quam condimentum.   Pellentesque a sapien risus. Sed in arcu at nisl volutpat scelerisque   sed id diam. Nam eget lorem quis nibh faucibus euismod. Sed eget velit   vel orci iaculis vestibulum sed quis nisi. Donec cursus tincidunt   dapibus. Curabitur ac mauris vitae urna posuere elementum. Cras feugiat   <a href="#" title="You can specify a color theme by adding a simple class name" class="black">ornare</a> ultricies. Quisque quis est mauris, sed dapibus ipsum. Cras neque   ante, sodales pharetra egestas in, commodo vehicula ligula. Curabitur   turpis quam, interdum nec placerat in, malesuada sit amet ante. Fusce   tempor facilisis est, vitae varius justo scelerisque eu. Nulla sed ante   ipsum, id ultricies massa. Nunc sollicitudin, tortor sed mattis   consectetur, sem dolor consequat dui, <a href="#" title="The script would work on any kind of element, not just links.">consectetur</a> sodales elit lorem vel   neque. Etiam ut leo sed nunc sagittis malesuada sit amet porta metus.   Praesent faucibus lorem sit amet mauris egestas molestie. Duis vel nunc   sed tortor vulputate faucibus. </p>
      <p> Mauris <a href="#" title="White theme" class="white">ultricies</a> nulla eget lacus commodo lacinia vulputate est   elementum. Vestibulum vulputate, lectus eget posuere interdum, tellus   est mattis odio, sed vehicula augue enim sit amet metus. Phasellus justo   est, commodo sit amet facilisis quis, sodales ac ante. Pellentesque   commodo, massa a sagittis vulputate, elit metus rhoncus risus, at dictum   purus magna ac eros. Etiam a augue at mauris fermentum sollicitudin.   Donec sed lacus velit. Cras pellentesque ornare diam, in lacinia enim   tincidunt ac. Etiam sodales aliquet sem, vel vulputate risus dapibus in.   Nulla hendrerit congue diam a placerat. Nulla orci ligula, convallis   nec adipiscing iaculis, accumsan a purus. Praesent eleifend mauris eu   quam commodo pretium. Pellentesque congue <a href="#" class="red" title="A red tooltip">tincidunt</a> imperdiet. Vivamus   felis nunc, mollis eu tincidunt iaculis, <a href="#" title="Visit Website">condimentum</a> vitae risus. Nulla   eget risus nisl, lobortis mollis tellus. Quisque tempor gravida elit,   vel rhoncus odio condimentum iaculis. Praesent rhoncus pharetra est vel   fringilla. Proin a tortor quis quam viverra accumsan. Phasellus pulvinar   ornare pharetra. </p>
      <p> Phasellus vitae lobortis elit. Nunc gravida ultrices elit elementum   ultricies. Curabitur sed enim ac nibh tempus viverra ut <a href="#" title="Visit Website" class="blue">sodales</a> leo.   Integer a orci eget urna scelerisque tincidunt. Proin nibh ante, egestas   et porta ac, tempus quis diam. Pellentesque sagittis posuere erat et   posuere. Sed facilisis risus purus. Integer aliquam condimentum enim,   sit amet tincidunt metus ultrices sit amet. Nulla at purus non lorem   varius tincidunt at ut nunc. Aenean tellus urna, faucibus faucibus   pharetra a, laoreet ac enim. <a href="#" title="Visit Website">Quisque</a> ac lobortis nisi. Curabitur ipsum   tellus, pretium nec mollis et, iaculis id magna. Donec et elit nisl.   Etiam aliquam molestie tincidunt. Maecenas rhoncus eros a velit   tristique blandit. Morbi molestie pulvinar neque nec scelerisque.   Pellentesque nec hendrerit libero. </p>
  </div>
</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="colortip-1.0/colortip-1.0-jquery.js"></script>
<script type="text/javascript" src="script.js"></script>

              
            
!

CSS

              
                .colorTip{
	/* This class is assigned to the color tip span by jQuery */
	
	display:none;
	position:absolute;	
	left:50%;
	top:-30px;
	padding:6px;
	
	background-color:white;
	font-family:Arial,Helvetica,sans-serif;
	font-size:11px;
	font-style:normal;
	line-height:1;
	text-decoration:none;
	text-align:center;
	text-shadow:0 0 1px white;
	white-space:nowrap;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

.pointyTip,.pointyTipShadow{
	/* Setting a thick transparent border on a 0x0 div to create a triangle */
	border:6px solid transparent;
	bottom:-12px;
	height:0;
	left:50%;
	margin-left:-6px;
	position:absolute;
	width:0;
}

.pointyTipShadow{
	/* The shadow tip is 1px larger, so it acts as a border to the tip */
	border-width:7px;
	bottom:-14px;
	margin-left:-7px;
}

.colorTipContainer{
	position:relative;
	text-decoration:none !important;
}


/* 6 Available Color Themes */

.white .pointyTip{ border-top-color:white;}
.white .pointyTipShadow{ border-top-color:#ddd;}
.white .colorTip{
	background-color:white;
	border:1px solid #DDDDDD;
	color:#555555;
}

.yellow .pointyTip{ border-top-color:#f9f2ba;}
.yellow .pointyTipShadow{ border-top-color:#e9d315;}
.yellow .colorTip{
	background-color:#f9f2ba;
	border:1px solid #e9d315;
	color:#5b5316;
}

.blue .pointyTip{ border-top-color:#d9f1fb;}
.blue .pointyTipShadow{ border-top-color:#7fcdee;}
.blue .colorTip{
	background-color:#d9f1fb;
	border:1px solid #7fcdee;
	color:#1b475a;
}

.green .pointyTip{ border-top-color:#f2fdf1;}
.green .pointyTipShadow{ border-top-color:#b6e184;}
.green .colorTip{
	background-color:#f2fdf1;
	border:1px solid #b6e184;
	color:#558221;
}

.red .pointyTip{ border-top-color:#bb3b1d;}
.red .pointyTipShadow{ border-top-color:#8f2a0f;}
.red .colorTip{
	background-color:#bb3b1d;
	border:1px solid #8f2a0f;
	color:#fcfcfc;
	text-shadow:none;
}

.black .pointyTip{ border-top-color:#333;}
.black .pointyTipShadow{ border-top-color:#111;}
.black .colorTip{
	background-color:#333;
	border:1px solid #111;
	color:#fcfcfc;
	text-shadow:none;
}

/* 
 *	These styles are needed for the styling of the demo page.
 *	You only need the colortip-1.0-jquery.css stylesheet to display
 *	the colorful tooltips on your site.
 */

*{
	margin:0;
	padding:0;
}

body{
	font-size:13px;
	color:#777;
	background-color:#f6f8f9;
	font-family:Arial, Helvetica, sans-serif;
	text-shadow:1px 1px 0 white;
}

h1{
	color:#6f9e1d;
	font-size:40px;
}

h2{
	font-size:22px;
	font-style:italic;
	font-weight:normal;
	color:#515151;
}

h1,h2{
	font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
	margin:30px 0;
}

p{
	padding-bottom:15px;
	line-height:1.5;
	text-align:justify;
}

#page{
	/* This the main container div */
	width:900px;
	margin:0 auto;
	position:relative;
	padding-top:1px;
}

h2.backToTz{
	position:absolute;
	right:0;
	top:52px;
	white-space:nowrap;
}

a, a:visited {
	text-decoration:none;
	outline:none;
	color:#159ce9;
}

a:hover{	text-decoration:underline;}
a img{	border:none;}
              
            
!

JS

              
                (function($){
	$.fn.colorTip = function(settings){

		var defaultSettings = {
			color		: 'yellow',
			timeout		: 500
		}
		
		var supportedColors = ['red','green','blue','white','yellow','black'];
		
		/* Combining the default settings object with the supplied one */
		settings = $.extend(defaultSettings,settings);

		/*
		*	Looping through all the elements and returning them afterwards.
		*	This will add chainability to the plugin.
		*/
		
		return this.each(function(){

			var elem = $(this);
			
			// If the title attribute is empty, continue with the next element
			if(!elem.attr('title')) return true;
			
			// Creating new eventScheduler and Tip objects for this element.
			// (See the class definition at the bottom).
			
			var scheduleEvent = new eventScheduler();
			var tip = new Tip(elem.attr('title'));

			// Adding the tooltip markup to the element and
			// applying a special class:
			
			elem.append(tip.generate()).addClass('colorTipContainer');

			// Checking to see whether a supported color has been
			// set as a classname on the element.
			
			var hasClass = false;
			for(var i=0;i<supportedColors.length;i++)
			{
				if(elem.hasClass(supportedColors[i])){
					hasClass = true;
					break;
				}
			}
			
			// If it has been set, it will override the default color
			
			if(!hasClass){
				elem.addClass(settings.color);
			}
			
			// On mouseenter, show the tip, on mouseleave set the
			// tip to be hidden in half a second.
			
			elem.hover(function(){

				tip.show();
				
				// If the user moves away and hovers over the tip again,
				// clear the previously set event:
				
				scheduleEvent.clear();

			},function(){

				// Schedule event actualy sets a timeout (as you can
				// see from the class definition below).
				
				scheduleEvent.set(function(){
					tip.hide();
				},settings.timeout);

			});
			
			// Removing the title attribute, so the regular OS titles are
			// not shown along with the tooltips.
			
			elem.removeAttr('title');
		});
		
	}


	/*
	/	Event Scheduler Class Definition
	*/

	function eventScheduler(){}
	
	eventScheduler.prototype = {
		set	: function (func,timeout){

			// The set method takes a function and a time period (ms) as
			// parameters, and sets a timeout

			this.timer = setTimeout(func,timeout);
		},
		clear: function(){
			
			// The clear method clears the timeout
			
			clearTimeout(this.timer);
		}
	}


	/*
	/	Tip Class Definition
	*/

	function Tip(txt){
		this.content = txt;
		this.shown = false;
	}
	
	Tip.prototype = {
		generate: function(){
			
			// The generate method returns either a previously generated element
			// stored in the tip variable, or generates it and saves it in tip for
			// later use, after which returns it.
			
			return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
											 '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
		},
		show: function(){
			if(this.shown) return;
			
			// Center the tip and start a fadeIn animation
			this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
			this.shown = true;
		},
		hide: function(){
			this.tip.fadeOut();
			this.shown = false;
		}
	}
	
})(jQuery);

$(document).ready(function(){

	/* Adding a colortip to any tag with a title attribute: */

	$('[title]').colorTip({color:'yellow'});

});

              
            
!
999px

Console