source.by

Responsive and Mobile-Friendly Tooltip — Osvaldas Valutis

Source 2020: https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly | 2020-01-31
Tooltip is a splendid invention. Small detail in web design that plays a big role when it comes to user experience. Usually, tooltips are used…

        <!DOCTYPE html>

<!--[if lte IE 8]> <html lang="en" class="html--notsupported"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" class="no-js no-touch"> <!--<![endif]-->

<head>

	<meta charset="utf-8" />

	<title>Responsive and Mobile-Friendly Tooltip — Osvaldas Valutis</title>

	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="description" content="Tooltip is a splendid invention. Small detail in web design that plays a big role when it comes to user experience. Usually, tooltips are used…" />
	<meta name="robots" content="all, noodp, noydir">

	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-title" content="Osvaldas V.">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<meta name="application-name" content="Osvaldas Valutis" />
	<meta name="msapplication-tooltip" content="Osvaldas Valutis" />
	<meta name="msapplication-TileImage" content="https://osvaldas.info/theme/img/meta-mstouch.1466186382.png" />
	<meta name="msapplication-TileColor" content="#ffffff" />
	<meta name="msapplication-tap-highlight" content="no" />

	<meta property="og:type" content="website" />
	<meta property="og:site_name" content="Osvaldas Valutis" />
	<meta property="og:title" content="Responsive and Mobile-Friendly Tooltip — Osvaldas Valutis" />
	<meta property="og:description" content="Tooltip is a splendid invention. Small detail in web design that plays a big role when it comes to user experience. Usually, tooltips are used…" />
	<meta property="og:url" content="https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly" />
	<meta property="og:image" content="https://osvaldas.info/incoming/images/posts/blog/elegant-css-and-jquery-tooltip-responsive-mobile-friendly.jpg" />

    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly">
    <meta name="twitter:title" content="Responsive and Mobile-Friendly Tooltip — Osvaldas Valutis" />
    <meta name="twitter:description" content="Tooltip is a splendid invention. Small detail in web design that plays a big role when it comes to user experience. Usually, tooltips are used…" />
    <meta name="twitter:image:src" content="https://osvaldas.info/incoming/images/posts/blog/elegant-css-and-jquery-tooltip-responsive-mobile-friendly.jpg" />
    <meta name="twitter:site" content="@osvaldas">
    <meta name="twitter:creator" content="@osvaldas">

	<link rel="publisher" href="https://plus.google.com/107216309002112755043" />
    <link rel="alternate" type="application/rss+xml" href="https://osvaldas.info/rss/blog">

	<link rel="shortcut icon" href="https://osvaldas.info/theme/img/favicon.1466186382.ico" />
	<link rel="apple-touch-icon-precomposed" href="https://osvaldas.info/theme/img/meta-touch.1466186382.png" />
	<link rel="image_src" href="https://osvaldas.info/incoming/images/posts/blog/elegant-css-and-jquery-tooltip-responsive-mobile-friendly.jpg" />

	<link rel="canonical" href="https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly" />

	<!--<link rel="prerender" href="" />-->

	<link rel="preconnect" href="http://platform.twitter.com" />
	<link rel="preconnect" href="http://cdn.carbonads.com" />
	<link rel="preconnect" href="http://connect.facebook.net" />
	<link rel="preconnect" href="http://apis.google.com" />
	<link rel="preconnect" href="http://www.google-analytics.com" />
	<link rel="preconnect" href="http://srv.carbonads.net" />
	<link rel="preconnect" href="https://platform.twitter.com" />
	<link rel="preconnect" href="https://apis.google.com" />
	<link rel="preconnect" href="https://www.facebook.com" />
	<link rel="preconnect" href="http://staticxx.facebook.com" />
	<link rel="preconnect" href="https://staticxx.facebook.com" />
	<link rel="preconnect" href="http://assets.servedby-buysellads.com" />
	<link rel="preconnect" href="https://accounts.google.com" />
	<link rel="preconnect" href="http://www.facebook.com" />

	<link rel="dns-prefetch" href="http://platform.twitter.com" />
	<link rel="dns-prefetch" href="http://cdn.carbonads.com" />
	<link rel="dns-prefetch" href="http://connect.facebook.net" />
	<link rel="dns-prefetch" href="http://apis.google.com" />
	<link rel="dns-prefetch" href="http://www.google-analytics.com" />
	<link rel="dns-prefetch" href="http://srv.carbonads.net" />
	<link rel="dns-prefetch" href="https://platform.twitter.com" />
	<link rel="dns-prefetch" href="https://apis.google.com" />
	<link rel="dns-prefetch" href="https://www.facebook.com" />
	<link rel="dns-prefetch" href="http://staticxx.facebook.com" />
	<link rel="dns-prefetch" href="https://staticxx.facebook.com" />
	<link rel="dns-prefetch" href="http://assets.servedby-buysellads.com" />
	<link rel="dns-prefetch" href="https://accounts.google.com" />
	<link rel="dns-prefetch" href="http://www.facebook.com" />

	
	<link rel="stylesheet" href="https://osvaldas.info/theme/css/style.1466186382.css" />

	
	<script>

		var APP_ENVIRONMENT = 'production',
			APP_REVISION	= '1466186382',

			FONTS_FILE		= 'https://osvaldas.info/theme/css/fonts.1466186382.css';

		"use strict";!function(e,t,n){function o(e,t){return typeof e===t}function r(){var e,t,n,r,i,s,a;for(var l in w)if(w.hasOwnProperty(l)){if(e=[],t=w[l],t.name&&(e.push(t.name.toLowerCase()),t.options&&t.options.aliases&&t.options.aliases.length))for(n=0;n<t.options.aliases.length;n++)e.push(t.options.aliases[n].toLowerCase());for(r=o(t.fn,"function")?t.fn():t.fn,i=0;i<e.length;i++)s=e[i],a=s.split("."),1===a.length?S[a[0]]=r:(!S[a[0]]||S[a[0]]instanceof Boolean||(S[a[0]]=new Boolean(S[a[0]])),S[a[0]][a[1]]=r),_.push((r?"":"no-")+a.join("-"))}}function i(e){var t=b.className,n=S._config.classPrefix||"";if(P&&(t=t.baseVal),S._config.enableJSClass){var o=new RegExp("(^|\\s)"+n+"no-js(\\s|$)");t=t.replace(o,"$1"+n+"js$2")}S._config.enableClasses&&(t+=" "+n+e.join(" "+n),P?b.className.baseVal=t:b.className=t)}function s(){return"function"!=typeof t.createElement?t.createElement(arguments[0]):P?t.createElementNS.call(t,"http://www.w3.org/2000/svg",arguments[0]):t.createElement.apply(t,arguments)}function a(){var e=t.body;return e||(e=s(P?"svg":"body"),e.fake=!0),e}function l(e,n,o,r){var i,l,u,f,c="modernizr",d=s("div"),p=a();if(parseInt(o,10))for(;o--;)u=s("div"),u.id=r?r[o]:c+(o+1),d.appendChild(u);return i=s("style"),i.type="text/css",i.id="s"+c,(p.fake?p:d).appendChild(i),p.appendChild(d),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(t.createTextNode(e)),d.id=c,p.fake&&(p.style.background="",p.style.overflow="hidden",f=b.style.overflow,b.style.overflow="hidden",b.appendChild(p)),l=n(d,e),p.fake?(p.parentNode.removeChild(p),b.style.overflow=f,b.offsetHeight):d.parentNode.removeChild(d),!!l}function u(e,t){return!!~(""+e).indexOf(t)}function f(e){return e.replace(/([a-z])-([a-z])/g,function(e,t,n){return t+n.toUpperCase()}).replace(/^-/,"")}function c(e,t){return function(){return e.apply(t,arguments)}}function d(e,t,n){var r;for(var i in e)if(e[i]in t)return n===!1?e[i]:(r=t[e[i]],o(r,"function")?c(r,n||t):r);return!1}function p(e){return e.replace(/([A-Z])/g,function(e,t){return"-"+t.toLowerCase()}).replace(/^ms-/,"-ms-")}function m(t,o){var r=t.length;if("CSS"in e&&"supports"in e.CSS){for(;r--;)if(e.CSS.supports(p(t[r]),o))return!0;return!1}if("CSSSupportsRule"in e){for(var i=[];r--;)i.push("("+p(t[r])+":"+o+")");return i=i.join(" or "),l("@supports ("+i+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return n}function g(e,t,r,i){function a(){c&&(delete k.style,delete k.modElem)}if(i=o(i,"undefined")?!1:i,!o(r,"undefined")){var l=m(e,r);if(!o(l,"undefined"))return l}for(var c,d,p,g,h,v=["modernizr","tspan"];!k.style;)c=!0,k.modElem=s(v.shift()),k.style=k.modElem.style;for(p=e.length,d=0;p>d;d++)if(g=e[d],h=k.style[g],u(g,"-")&&(g=f(g)),k.style[g]!==n){if(i||o(r,"undefined"))return a(),"pfx"==t?g:!0;try{k.style[g]=r}catch(y){}if(k.style[g]!=h)return a(),"pfx"==t?g:!0}return a(),!1}function h(e,t,n,r,i){var s=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+z.join(s+" ")+s).split(" ");return o(t,"string")||o(t,"undefined")?g(a,t,r,i):(a=(e+" "+E.join(s+" ")+s).split(" "),d(a,t,n))}function v(e,t,o){return h(e,n,n,t,o)}function y(e,t){if("object"==typeof e)for(var n in e)j(e,n)&&y(n,e[n]);else{e=e.toLowerCase();var o=e.split("."),r=S[o[0]];if(2==o.length&&(r=r[o[1]]),"undefined"!=typeof r)return S;t="function"==typeof t?t():t,1==o.length?S[o[0]]=t:(!S[o[0]]||S[o[0]]instanceof Boolean||(S[o[0]]=new Boolean(S[o[0]])),S[o[0]][o[1]]=t),i([(t&&0!=t?"":"no-")+o.join("-")]),S._trigger(e,t)}return S}var _=[],w=[],C={_version:"3.3.1",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,t){var n=this;setTimeout(function(){t(n[e])},0)},addTest:function(e,t,n){w.push({name:e,fn:t,options:n})},addAsyncTest:function(e){w.push({name:null,fn:e})}},S=function(){};S.prototype=C,S=new S;var x=C._config.usePrefixes?" -webkit- -moz- -o- -ms- ".split(" "):["",""];C._prefixes=x;var b=t.documentElement,P="svg"===b.nodeName.toLowerCase(),T="Moz O ms Webkit",E=C._config.usePrefixes?T.toLowerCase().split(" "):[];C._domPrefixes=E,S.addTest("cssgradients",function(){for(var e,t="background-image:",n="gradient(linear,left top,right bottom,from(#9f9),to(white));",o="",r=0,i=x.length-1;i>r;r++)e=0===r?"to ":"",o+=t+x[r]+"linear-gradient("+e+"left top, #9f9, white);";S._config.usePrefixes&&(o+=t+"-webkit-"+n);var a=s("a"),l=a.style;return l.cssText=o,(""+l.backgroundImage).indexOf("gradient")>-1});var N=function(){var t=e.matchMedia||e.msMatchMedia;return t?function(e){var n=t(e);return n&&n.matches||!1}:function(t){var n=!1;return l("@media "+t+" { #modernizr { position: absolute; } }",function(t){n="absolute"==(e.getComputedStyle?e.getComputedStyle(t,null):t.currentStyle).position}),n}}();C.mq=N;var z=(C.testStyles=l,C._config.usePrefixes?T.split(" "):[]);C._cssomPrefixes=z;var I={elem:s("modernizr")};S._q.push(function(){delete I.elem});var k={style:I.elem.style};S._q.unshift(function(){delete k.style}),C.testProp=function(e,t,o){return g([e],n,t,o)},C.testAllProps=h,C.testAllProps=v,S.addTest("cssanimations",v("animationName","a",!0));var j;!function(){var e={}.hasOwnProperty;j=o(e,"undefined")||o(e.call,"undefined")?function(e,t){return t in e&&o(e.constructor.prototype[t],"undefined")}:function(t,n){return e.call(t,n)}}(),C._l={},C.on=function(e,t){this._l[e]||(this._l[e]=[]),this._l[e].push(t),S.hasOwnProperty(e)&&setTimeout(function(){S._trigger(e,S[e])},0)},C._trigger=function(e,t){if(this._l[e]){var n=this._l[e];setTimeout(function(){var e,o;for(e=0;e<n.length;e++)(o=n[e])(t)},0),delete this._l[e]}},S._q.push(function(){C.addTest=y}),r(),i(_),delete C.addTest,delete C.addAsyncTest;for(var O=0;O<S._q.length;O++)S._q[O]();e.Modernizr=S}(window,document),Modernizr.addTest("placeholder",function(){return"placeholder"in document.createElement("input")}),function(e,t){var n,o,r="localStorage"in e&&null!==e.localStorage,i=function(){var e=t.createElement("style");t.head.appendChild(e),e.textContent=o};if(r&&localStorage.getItem("customFontsRevision")==APP_REVISION&&(o=localStorage.getItem("customFonts")))return i(),!0;try{n=new XMLHttpRequest,n.open("GET",FONTS_FILE,!0),n.onload=function(){n.status>=200&&n.status<400&&(o=n.responseText,i(),r&&(localStorage.setItem("customFonts",o),localStorage.setItem("customFontsRevision",APP_REVISION)))},n.send()}catch(s){}}(window,document);
	</script>

</head>

<body>





<!-- SVG icons -->

<div id="svg" class="is-hidden" aria-hidden="true">
	<svg width="0" height="0">
		<symbol id="svg--menu" viewbox="0 0 50 43"><path d="M0 0h50v8.237h-50v-8.237zm0 34.764h50v8.236h-50v-8.236zm0-17.381h50v8.236h-50v-8.236z" /></symbol>
		<symbol id="svg--delete" viewbox="0 0 50 50"><path d="M50 43.37l-18.37-18.37 18.37-18.367-6.63-6.631-18.37 18.368-18.367-18.37-6.63 6.63 18.367 18.37-18.37 18.368 6.63 6.631 18.37-18.369 18.37 18.37 6.63-6.63z" /></symbol>
		<symbol id="svg--search" viewbox="0 0 50 50"><path d="M48.625 48.622c-1.836 1.836-4.807 1.836-6.641 0l-8.284-8.286c-3.41 2.182-7.438 3.486-11.787 3.486-12.102.001-21.913-9.811-21.913-21.912s9.811-21.912 21.913-21.912c12.103 0 21.913 9.811 21.913 21.913 0 4.347-1.307 8.375-3.489 11.787l8.287 8.285c1.835 1.832 1.835 4.805.001 6.639zm-26.712-42.362c-8.644 0-15.652 7.005-15.652 15.652 0 8.645 7.008 15.651 15.652 15.651 8.646 0 15.651-7.006 15.651-15.651 0-8.647-7.005-15.652-15.651-15.652z" /></symbol>
		<symbol id="svg--email" viewbox="0 0 50 36"><path d="M25 25.199l-6.186-5.457-17.686 15.279c.644.605 1.51.979 2.467.979h42.809c.951 0 1.816-.373 2.459-.979l-17.675-15.279-6.188 5.457zm23.87-24.223c-.641-.605-1.507-.976-2.466-.976h-42.809c-.952 0-1.817.375-2.46.982l23.865 20.618 23.87-20.624zm-48.87 2.185v29.907l17.261-14.783-17.261-15.124zm32.738 15.124l17.262 14.781v-29.916l-17.262 15.135z" /></symbol>
		<symbol id="svg--cart" viewbox="0 0 50 40"><path d="M43.947 26.12l5.911-17.471c.297-.839.072-1.344-.166-1.678-.612-.853-1.874-.861-2.117-.861l-33.406-.006-.892-4.177c-.24-.987-.952-1.927-2.386-1.927h-9.388c-.973 0-1.503.45-1.503 1.349v2.412c0 .867.527 1.095 1.537 1.095h7.926l6.067 25.436c-.963 1.008-1.488 2.478-1.488 3.848 0 3.018 2.433 5.798 5.541 5.798 2.932 0 5.132-2.714 5.489-4.332h11.815c.357 1.617 2.139 4.394 5.487 4.394 3.055 0 5.536-2.612 5.536-5.623 0-2.994-1.845-5.65-5.504-5.65-1.521 0-3.328.811-4.167 2.021h-14.518c-1.053-1.617-2.492-2.117-3.948-2.176l-.202-1.06h22.09c1.664.001 1.992-.599 2.286-1.392zm-1.531 6.136c1.149 0 2.08.921 2.08 2.056 0 1.134-.931 2.058-2.08 2.058s-2.084-.92-2.084-2.058c.002-1.135.935-2.056 2.084-2.056zm-20.775 2.056c0 1.147-.944 2.081-2.103 2.081-1.162-.003-2.107-.934-2.107-2.081s.946-2.081 2.107-2.081c1.158-.001 2.103.933 2.103 2.081z" /></symbol>
	</svg>
</div>



<div class="container">


	<header class="header" role="banner" id="header">
		<div class="header__toggler"><a href="#header"><svg><use xlink:href="#svg--menu"></use></svg></a><a href="#logo"><svg><use xlink:href="#svg--delete"></use></svg></a></div>
		<div class="header__logo" id="logo"><a href="/"><img src="/theme/img/logo.svg" alt="Osvaldas Valutis" /></a></div>
		<div class="header__info">I’m <a href="/about">Osvaldas Valutis</a>, a web designer who thinks in code at <a href="https://www.kollegorna.se/en/" target="_blank">Kollegorna</a>.</div>
		<nav class="header__nav">
			<ul>
				<li class="is-selected"><a href="/blog">Blog</a></li>
				<li><a href="/shop" class="header__nav__cart">Shop</a></li>
				<li><a href="/work">Work</a></li>
				<li><a href="/about">About</a></li>
			</ul>
		</nav>
		<div class="header__bottom">
			<div class="header__ad" id="carbonads-location">
			</div>
			<div class="header__copyright" role="contentinfo">
				Copyright © 2020 Osvaldas Valutis. Hosted on <a href="https://www.linode.com/?r=5086803ed659f21de68528ac388f621b393f1b85" target="_blank" class="linode-link">Linode</a>’s SSD servers.
			</div>
		</div>
	</header>


	
	<div class="main" role="main">

		<header class="page-head">
			<h1 class="h1">Responsive and Mobile-Friendly Tooltip</h1>
			<time datetime="2012-02-16" title="2012-02-16" class="text-spec">16 Feb, 2012</time>
		</header>

		
		<ul class="info-rows text-spec">

			
		</ul>

		
		<article class="blog__content styled styled--blocks">

			
<p>Tooltip is a splendid invention. Small detail in web design that plays a big role when it comes to user experience. Usually, tooltips are used to present a tiny amount of hidden content (mainly explanatory, so-called tips), that pops up when user moves a cursor over or clicks (less common) on a special target.</p>

<p><a href="http://osvaldas.info/examples/elegant-css-and-jquery-tooltip-responsive-mobile-friendly/" target="_blank"><noscript class="responsive-image"><img alt="Elegant CSS and jQuery Tooltip: Responsive, Mobile-Friendly" src="https://osvaldas.info/incoming/images/blog/style_posts_m/css_jquery_tooltip.jpg" style="width:100%" data-srcset="https://osvaldas.info/incoming/images/blog/style_posts_l/css_jquery_tooltip.jpg 1520w, https://osvaldas.info/incoming/images/blog/style_posts_m/css_jquery_tooltip.jpg 760w, https://osvaldas.info/incoming/images/blog/style_posts_s/css_jquery_tooltip.jpg 380w"></noscript></a></p>

<p>When working on my personal website, I was in need of a tooltip. I decided not to limit it just on a typical definition of a tooltip, but also make it a better occurrence using CSS and jQuery technologies.</p>

<h2>Key Features</h2>

<ul><li>It's <strong>responsive</strong>. It relies on a maximum width value when viewed on large screens, adopts to narrow environments and picks the best viewable position relatively to the target (top, bottom; left, center, right);</li>
	<li>It's <strong>mobile-friendly</strong>. It pops up when a call-to-action button is tapped and disappears when tapped on the tooltip itself;</li>
	<li>It's <strong>HTML formatting capable</strong>. Need to write some words in italic or so? No problem, this will work out.</li>
</ul><h2>CSS</h2>

<p>To begin with, let's build the look of our tooltip. No fancy styling, just major properties so you can clearly see how it works (all of the sexy things will take part in the demo below).</p>

<pre class="brush:css;">#tooltip
{
	text-align: center;
	color: #fff;
	background: #111;
	position: absolute;
	z-index: 100;
	padding: 15px;
}

	#tooltip:after /* triangle decoration */
	{
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid #111;
		content: '';
		position: absolute;
		left: 50%;
		bottom: -10px;
		margin-left: -10px;
	}

		#tooltip.top:after
		{
			border-top-color: transparent;
			border-bottom: 10px solid #111;
			top: -20px;
			bottom: auto;
		}

		#tooltip.left:after
		{
			left: 10px;
			margin: 0;
		}

		#tooltip.right:after
		{
			right: 10px;
			left: auto;
			margin: 0;
		}</pre>

<h2>JavaScript</h2>

<pre class="brush:jscript;">$( function()
{
	var targets = $( '[rel~=tooltip]' ),
		target	= false,
		tooltip = false,
		title	= false;

	targets.bind( 'mouseenter', function()
	{
		target	= $( this );
		tip		= target.attr( 'title' );
		tooltip	= $( '<div id="tooltip"></div>' );

		if( !tip || tip == '' )
			return false;

		target.removeAttr( 'title' );
		tooltip.css( 'opacity', 0 )
			   .html( tip )
			   .appendTo( 'body' );

		var init_tooltip = function()
		{
			if( $( window ).width() < tooltip.outerWidth() * 1.5 )
				tooltip.css( 'max-width', $( window ).width() / 2 );
			else
				tooltip.css( 'max-width', 340 );

			var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
				pos_top	 = target.offset().top - tooltip.outerHeight() - 20;

			if( pos_left < 0 )
			{
				pos_left = target.offset().left + target.outerWidth() / 2 - 20;
				tooltip.addClass( 'left' );
			}
			else
				tooltip.removeClass( 'left' );

			if( pos_left + tooltip.outerWidth() > $( window ).width() )
			{
				pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
				tooltip.addClass( 'right' );
			}
			else
				tooltip.removeClass( 'right' );

			if( pos_top < 0 )
			{
				var pos_top	 = target.offset().top + target.outerHeight();
				tooltip.addClass( 'top' );
			}
			else
				tooltip.removeClass( 'top' );

			tooltip.css( { left: pos_left, top: pos_top } )
				   .animate( { top: '+=10', opacity: 1 }, 50 );
		};

		init_tooltip();
		$( window ).resize( init_tooltip );

		var remove_tooltip = function()
		{
			tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
			{
				$( this ).remove();
			});

			target.attr( 'title', tip );
		};

		target.bind( 'mouseleave', remove_tooltip );
		tooltip.bind( 'click', remove_tooltip );
	});
});</pre>

<h2>HTML Example</h2>

<pre class="brush:xml;"><abbr title="User Experience" rel="tooltip">UX</abbr></pre>

<p><a class="button" href="http://osvaldas.info/examples/elegant-css-and-jquery-tooltip-responsive-mobile-friendly/" target="_blank">Demo</a></p>

<h2>How To Implement</h2>

<ol><li>Put the CSS code anywhere in existing CSS file or create a new one. You can also insert it in HTML file in <em>head</em> by wrapping the code with <code><style></code> and <code></style></code> tags.</li>
	<li>Put the JavaScript code in existing JS file or create a new one. You can also insert it in HTML file in <em>head</em> or, better, <em>body</em> by wrapping the code with <code><script></code> and <code></script></code> tags.</li>
	<li>Assign the attribute <code>rel="tooltip"</code> and <code>title="Enter your tip here"</code> to any of <em>body</em> tags in HTML file where you want the tooltip to pop up when called. Set <em>title</em> value with your tip (use<code> <strong></code>, <code><em></code> etc. to distinguish text fragments, but avoid <em>block</em> elements).</li>
</ol><p>Also, be sure that you already have <a href="http://jquery.com" target="_blank">jQuery</a> library included.</p>

<p>That's it! Simple enough. If you've got any suggestions or insights, feel free to share them: leave a comment or send me a <a href="http://twitter.com/osvaldas" target="_blank">tweet</a>.</p>

		</article>

		<div class="blog-share clearfix">
			<a href="http://twitter.com/intent/tweet?url=http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly&text=Responsive and Mobile-Friendly Tooltip&via=osvaldas" target="_blank" rel="nofollow" class="socialite twitter-share" data-url="http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly" data-text="Responsive and Mobile-Friendly Tooltip" data-count="horizontal" data-via="osvaldas" data-related="osvaldas">Tweet</a>
			<a href="http://facebook.com/sharer/sharer.php?u=http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly" target="_blank" rel="nofollow" class="socialite facebook-like" data-href="http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly" data-send="false" data-layout="button_count" data-show-faces="false">Like</a>
			<a href="https://plus.google.com/share?url=http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly" rel="nofollow" target="_blank" class="socialite googleplus-one" data-href="http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly" data-size="medium">+1</a>
			<a href="http://twitter.com/osvaldas" target="_blank" rel="me" class="socialite twitter-follow" data-type="follow" data-show-count="true" data-size="large">Follow @osvaldas</a>
		</div>

		<div class="subscriptions">
			<section>
				<h2 class="text-spec">Newsletter</h2>
				<form method="post" action="/newsletter/subscribe" class="newsletter-subscription" novalidate>
					<div class="form-success is-hidden"><strong>Thank you</strong> for subscribing!</div>
					<input type="hidden" name="do-newsletter-subscribe" value="1" />
					<input type="email" name="email" value="" placeholder="Email" class="form-textfield form-textfield--icon" />
					<svg><use xlink:href="#svg--email"></use></svg>
					<div class="form-row-error is-hidden" data-error-for="email"></div>
				</form>
				<div class="styled"><p class="text-smaller text-light">In case you want to be informed about my blog posts.</p></div>
			</section>
			<section>
				<h2 class="text-spec">RSS Feed</h2>
				<div class="styled"><p class="text-small text-light">You can also subscribe to my <strong><a href="/rss/blog">RSS feed</a></strong> in order to follow my blog.</p></div>
			</section>
		</div>

		
		<footer class="readnext">
			<a href="https://osvaldas.info/dribbble-and-forrst-invitation-giveaway">
				<span class="text-spec">Read next</span>
				<strong>Dribbble and Forrst Invitation Giveaway</strong>
			</a>
		</footer>

	</div>


</div>




<!-- 
	LAST BITS
-->

<!--[if lte IE 8]><div class="browser-not-supported styled"><p>Sorry, but your browser is too old to use the website. Try <a href="http://google.com/chrome">Google Chrome</a>.</p></div><![endif]-->
<div class="is-hidden" aria-hidden="true"><a href="http://osvaldas.info">Web designer</a>, <a href="http://osvaldas.info">web design</a>, <a href="http://osvaldas.info">web dizainas</a>, <a href="http://osvaldas.info">web dizaineris</a>, <a href="http://readerrr.com">rss reader</a>.</div>


<script>
	!function(e){var t=function(t,n){"use strict";var o=e.document.getElementsByTagName("script")[0],r=e.document.createElement("script");return r.src=t,r.async=!0,o.parentNode.insertBefore(r,o),n&&"function"==typeof n&&(r.onload=n),r};"undefined"!=typeof module?module.exports=t:e.loadJS=t}("undefined"!=typeof global?global:this);
	loadJS( 'https://osvaldas.info/theme/js/after.1466186382.js' );
</script>


<!-- Carbon Ads -->
<script>var n=window.document.createElement("script");n.src='//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=osvaldasinfo';n.id='_carbonads_js';window.document.getElementById("carbonads-location").appendChild(n);</script>

<!-- Google Analytics -->
<script>!function(e,t,a,n,c,s,o){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,s=t.createElement(a),o=t.getElementsByTagName(a)[0],s.async=1,s.src=n,o.parentNode.insertBefore(s,o)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-7572727-1","auto"),ga("send","pageview");</script>




</body>

</html>

HEADER-CODE:


HTTP/1.1 200 OK
Date: Thu, 07 May 2020 15:47:28 GMT
Server: Apache
Set-Cookie: ci_session=a264f9839c96091fb6c408d1db1e5ef9e30cf064; path=/; HttpOnly
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Connection: Upgrade, close
Vary: Accept-Encoding
Content-Type: text/html; charset=UTF-8


IP 194.135.87.147 osvaldas.info

Website:osvaldas.info
IP:194.135.87.147
County:LT Lithuania
Region:VL Vilnius
City:08234 Vilnius
Timezone:Europe/Vilnius
html
html5
CSS
CSS3
CSS GRID
Java
| https://www.instagram.com/explore/tags/gelas/ | CALQUE | Bedeutung im Cambridge Englisch Wörterbuch | Korfu Reisen jetzt buchen - Urlaub Griechenland - TUI.com | Klachten - Woonbron | Klachten | MindMyHouse - Bringing home owners and house sitters together | https://www.trustedhousesitters.com/house-and-pet-sitting-assignments/italy/ | https://www.facebook.com/CharlieLapsonStyle/ | linuxIT König OG, Dornbirn | Cylex® | Laccaso | /entityexplore?q=michaelk&filters=segment%3a"local"&entityListType=Retail&ypids=YN6740x5127289273631884616%252cYN6740x16824370473874037377&eeptype=LocalListing&CommonCat=90628&RefEnabled=1 | /entityexplore?q=MICHAEL+K.+FITNESS+M%c3%bcnchen-Planegg+Planegg+Bayern&ypid=YN6740x16824370473874037377&cp=48.109844~11.449022&eeptype=EntityFull&localsource=localisting&qpvt=michaelk | About | Exxelia Micropen | Micropen | Exxelia Micropen | Lesben - X Moms Movies