Intro tooltip

intro.html

<span class="introtip pos-a w-250 d-n" id="tooltip">
  <div class="tip rounded all shadow mark b-sol b-both pos-r">
		<div class="p-both">
			<a href="javascript:window.tour.close()" class="pos-a tr"><img src="cross_grey_small.png" class="m-t5 m-r5"></a>

			<span id="introTipMessage">
			<strong>Visada galite mums paskambinti.</strong>
			Jei susidūrėte su problema, ar sistemine klaida ar kitokiais neaiškumais. Visada galime mums paskambinti šiuo numeriu. Skambinti galite visą parą, 7 dienas per savaitę ir visiškai nemokamai.
			</span>

			<div class="m-t5 t-c">
				<table class="w-100p">
					<tr>
						<td class="p-l5"><a href="javascript:window.tour.close()">Skip</a></td>
						<td class="w1p no-br p-r5"><a href="javascript:window.tour.openPrev()">← Back</a></td>
						<td class="w1p no-br p-r5"><a href="javascript:window.tour.openNext()" >Next →</a></td>
					</tr>
				</table>
			</div>

		</div>
		<div class="arrow top"><div></div></div>
	</div>
</span>
<div class="clear"></div>

<script type="text/javascript">
	$(function () {
		var element = {
			'#hello': {
				pos: 'bottom',
				message: 'adads'
			},
			'#road_map_contact_info': {
				pos: 'right',
				message: 'Skambink siuo numeriu'
			},
			'.suggestionTwo': {
				pos: 'bottom',
				message: 'Demo message blablabla'
			}
		};
		window.tour = new Tour(element);
		window.tour.start();
	});
</script>

intro.js

/**
 * Created by Vytenis
 * Date: 13.4.23
 * Time: 16.47
 * © 2013
 */
var Tour = (function() {
	function Tour( elements ) {
		this.options = {
			debug     : true,
			started   : false,
			active    : 0,
			dom       : {},
			selectors : {
				classes : {
					introElementClass          : '.intro',
					introElementActive         : '.active',
					introElementTooltipClass   : '.introtip',
					introElementTooltipMessage : '#introTipMessage',
					introElementTooltipArrow   : '.arrow'
				}
			},
			elements  : {
				".suggestionOne" : {
					pos     : 'bottom',
					message : "Mano zinute 12"
				}
			}
		};
		this.bindEvents();

		// Extend object with a new elements
		this.options.elements = $.extend( this.options.elements, elements );

		var _this = this;

		// Add class to identify the tutorial objects
		$.each( this.options.elements, function( key, val ) {
			$( key ).addClass( _this.options.selectors.classes.introElementClass.replace( /\./g, "" ) ).data( val );
		} );

		// Get all active intro objects
		this.options.dom = $( _this.options.selectors.classes.introElementClass );
	}

	Tour.prototype.start = function() {
		this.options.started = true;
		var _this = this;

		// Add class to all visible intro elements
		$.each( this.options.elements, function( key, val ) {
			if ( $( key ).is( ':visible' ) ) {
				$( key ).addClass( _this.options.selectors.classes.introElementClass.replace( /\./g, "" ) );
			}
		} );

		// Find first intro element and activate this
		var $oIntroElement = $( _this.options.selectors.classes.introElementClass ).first();
		this.addTooltip( $oIntroElement );
	};

	Tour.prototype.addTooltip = function( element ) {
		if ( element.length > 0 ) {
			// Clear active
			$( this.options.selectors.classes.introElementClass + this.options.selectors.classes.introElementActive ).removeClass( this.options.selectors.classes.introElementActive.replace( /\./g, "" ) );
		} else {
			return;
		}

		// Prepare tooltip
		var
			$tooltip = $( this.options.selectors.classes.introElementTooltipClass ).removeClass( 'd-n' ),
			pos = element.data( 'pos' ),
			_this = this
		;

		// Arrow on tooltip
		$tooltip.find( this.options.selectors.classes.introElementTooltipArrow ).removeClass( 'top bottom left right' ).addClass( pos );

		// Add a message to the tooltip
		$tooltip.find( this.options.selectors.classes.introElementTooltipMessage ).html( element.data( 'message' ) );

		// Add on what and where?
		// Add active class and get position
		element.addClass( this.options.selectors.classes.introElementActive.replace( /\./g, "" ) );
		$tooltip.find( this.options.selectors.classes.introElementTooltipMessage ).html( element.data( 'message' ) );

		// Set active
		this.options.active = $( element );
		this.toolPos( element );
	};

	Tour.prototype.toolPos = function( element, animate ) {

		// Animation speed
		if ( animate === false ) {
			animate = 0;
		} else {
			animate = 'fast';
		}
		if ( element.length === 0 ) {
			return;
		}
		var $tooltip = $( this.options.selectors.classes.introElementTooltipClass ), pos = element.data( 'pos' ), elementPos = element.position();
		switch ( pos ) {
			case // If arrow bottom
			'bottom':
			{
				$tooltip.animate( {
					top  : elementPos.top - $tooltip.outerHeight() - $tooltip.find( this.options.selectors.classes.introElementTooltipArrow ).outerWidth(),
					left : elementPos.left + (element.outerWidth() / 2) - ($tooltip.outerWidth() / 2)
				}, animate );
				break;
			}
			// If arrow left
			case 'left':
			{
				$tooltip.animate( {
					top  : elementPos.top,
					left : elementPos.left + element.outerWidth() + $tooltip.find( this.options.selectors.classes.introElementTooltipArrow ).outerWidth()
				}, animate );
				break;
			}
			// If arrow right
			case 'right':
			{
				$tooltip.animate( {
					top  : elementPos.top,
					left : elementPos.left - $tooltip.outerWidth() - $tooltip.find( this.options.selectors.classes.introElementTooltipArrow ).outerWidth()
				}, animate );
				break;
			}
			// Default arrow is top
			default:
			{
				$tooltip.animate( {
					top  : elementPos.top + element.outerHeight() + $tooltip.find( this.options.selectors.classes.introElementTooltipArrow ).outerWidth(),
					left : elementPos.left + (element.outerWidth() / 2) - ($tooltip.outerWidth() / 2)
				}, animate );
				break;
			}
		}
	};

	Tour.prototype.openNext = function() {
		var currentIndex = this.options.dom.index( this.options.active );
		this.options.active = this.options.dom.eq( currentIndex + 1 );
		if ( this.options.active.length > 0 ) {
			this.addTooltip( this.options.active );
		} else {
			this.start();
		}
	};

	Tour.prototype.openPrev = function() {
		var currentIndex = this.options.dom.index( this.options.active );
		this.options.active = this.options.dom.eq( currentIndex - 1 );
		this.addTooltip( this.options.active );
	};

	Tour.prototype.bindEvents = function() {
		var _this = this;
		$( window ).bind( 'resize', function() {
			_this.onResize();
		} );
		$( 'body' ).click( function( e ) {
			var target = $( e.target );
			if ( !target.closest( _this.options.selectors.classes.introElementTooltipClass ).length ) {
				_this.close();
			}
		} );
	};

	Tour.prototype.onResize = function() {
		// if Intro is active get active element
		if ( this.options.started ) {
			// Find active element
			var element = $( this.options.selectors.classes.introElementClass + this.options.selectors.classes.introElementActive ).first();
			this.toolPos( element, false );
		}
	};

	Tour.prototype.close = function() {
		// Get all active intro elements and remove active class
		$( this.options.selectors.classes.introElementClass + this.options.selectors.classes.introElementActive ).removeClass( this.options.selectors.classes.introElementActive.replace( /\./g, "" ) );
		// Set intro option to not started
		this.options.active = 0;
		this.options.started = false;
		//Hide tooltip
		$( this.options.selectors.classes.introElementTooltipClass ).addClass( 'd-n' );
	};

	return Tour;
})();
//@ sourceMappingURL=intro.js.map