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 style="margin: 20px 0 120px 0;">
Artículo: <a href="https://iborra.es/blog/tooltips/">https://iborra.es/blog/tooltips/</a>
</div>
  
<!--  TOOLTIP BLOATED  --> 
    
					<div class="dummy dummy-menu dummy-menu-icons">
					<ul>
						<li><a class="tooltipbloated" href="#"><i style="color:#c39f76;" class="fa fa-fw fa-car"></i><span class="tooltipbloated-content">¡Hola! Soy un <span style="color:#c39f76">Tooltip</span> que sale del icono de un coche.</span></a></li>
						<li><a class="tooltipbloated" href="#"><i style="color:#c39f76;" class="fa fa-fw fa-bicycle"></i><span class="tooltipbloated-content">¡Hola! Soy un <span style="color:#c39f76">Tooltip</span> que sale del icono de una bicicleta.</span></a></li>
						<li><a class="tooltipbloated" href="#"><i style="color:#c39f76;" class="fa fa-fw fa-plane"></i><span class="tooltipbloated-content">¡Hola! Soy un <span style="color:#c39f76">Tooltip</span> que sale del icono de un avión.</span></a></li>
						<li><a class="tooltipbloated" href="#"><i style="color:#c39f76;" class="fa fa-fw fa-bus"></i><span class="tooltipbloated-content">¡Hola! Soy un <span style="color:#c39f76">Tooltip</span> que sale del icono de un autobús.</span></a></li>
					</ul>
				    </div>
                    
<!--  TOOLTIP BOX  --> 

					<div class="dummy dummy-text">
					<p>Esto es un ejemplo de <span class="tooltipbox tooltipbox-effect-1"><span class="tooltipbox-item">TOOLTIP BOX</span><span class="tooltipbox-content clearfix"><span class="tooltipbox-text">Un <span style="color:#c39f76">Tooltip</span> es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.<br><a href="diferentes-estilos-de-tooltips-para-tu-inspiracion">Iborra Web Design</a></span></span></span> y con un enlace en el interior de la caja.</p>
				    </div>
                    
<!--  TOOLTIP CLASSIC  -->
                                
					<div class="dummy dummy-text">
					<p>Mostrando Tooltip Classic con <span class="tooltipclassic tooltipclassic-effect-1"><span class="tooltipclassic-item">Efecto 1</span><span class="tooltipclassic-content clearfix"><img src="https://iborra.es/web/wp-content/themes/dfd-ronneby_child/img/tooltipclassic.jpg"><span class="tooltipclassic-text">Un <span style="color:#c39f76">Tooltip</span> es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.<br><a href="diferentes-estilos-de-tooltips-para-tu-inspiracion">Iborra Web Design</a></span></span></span> - <span class="tooltipclassic tooltipclassic-effect-2"><span class="tooltipclassic-item">Efecto 2</span><span class="tooltipclassic-content clearfix"><img src="https://iborra.es/web/wp-content/themes/dfd-ronneby_child/img/tooltipclassic.jpg"><span class="tooltipclassic-text">Un <span style="color:#c39f76">Tooltip</span> es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.<br><a href="diferentes-estilos-de-tooltips-para-tu-inspiracion">Iborra Web Design</a></span></span></span> - <span class="tooltipclassic tooltipclassic-effect-3"><span class="tooltipclassic-item">Efecto 3</span><span class="tooltipclassic-content clearfix"><img src="https://iborra.es/web/wp-content/themes/dfd-ronneby_child/img/tooltipclassic.jpg"><span class="tooltipclassic-text">Un <span style="color:#c39f76">Tooltip</span> es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.<br><a href="diferentes-estilos-de-tooltips-para-tu-inspiracion">Iborra Web Design</a></span></span></span> - <span class="tooltipclassic tooltipclassic-effect-4"><span class="tooltipclassic-item">Efecto 4</span><span class="tooltipclassic-content clearfix"><img src="https://iborra.es/web/wp-content/themes/dfd-ronneby_child/img/tooltipclassic.jpg"><span class="tooltipclassic-text">Un <span style="color:#c39f76">Tooltip</span> es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.<br><a href="diferentes-estilos-de-tooltips-para-tu-inspiracion">Iborra Web Design</a></span></span></span> y <span class="tooltipclassic tooltipclassic-effect-5"><span class="tooltipclassic-item">Efecto 5</span><span class="tooltipclassic-content clearfix"><span class="tooltipclassic-text">Un <span style="color:#c39f76">Tooltip</span> es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.<br><a href="diferentes-estilos-de-tooltips-para-tu-inspiracion">Iborra Web Design</a></span></span></span>.</p>
					</div>
                    
<!--  TOOLTIP COMIC  -->                  
                    
                    <div class="dummy dummy-avatar">
					<div class="tooltipcomic tooltipcomic-effect-1">
						<a href="#"><img src="https://iborra.es/web/wp-content/themes/dfd-ronneby_child/img/tooltipcomic-flip.png" alt="tooltipcomic"><h4>Efecto 1</h4></a>
						<span class="tooltipcomic-content">¡Hola! Soy un <span style="color:#c39f76">Tooltip</span> dentro de un diálogo de comic.</span>
						<div class="tooltipcomic-shape">
							<svg viewBox="0 0 200 150" preserveAspectRatio="none">
								<path id="path1" d="M184.112,144.325c0.704,2.461,3.412,4.016,5.905,3.611c2.526-0.318,4.746-2.509,4.841-5.093
								c0.153-2.315-1.483-4.54-3.703-5.155c-2.474-0.781-5.405,0.37-6.612,2.681c-0.657,1.181-0.845,2.619-0.442,3.917"></path>
								<path id="path2" d="M159.599,137.909c0.975,3.397,4.717,5.548,8.161,4.988c3.489-0.443,6.558-3.466,6.685-7.043
								c0.217-3.19-1.805-6.34-5.113-7.118c-3.417-1.079-7.469,0.508-9.138,3.701c-0.91,1.636-1.166,3.624-0.612,5.414"></path>
								<path id="path3" d="M130.646,125.253c1.368,4.656,6.393,7.288,10.806,6.718c4.763-0.451,9.26-4.276,9.71-9.394
								c0.369-3.779-1.902-7.583-5.244-9.144c-5.404-2.732-12.557-0.222-14.908,5.448c-0.841,1.945-1.018,4.214-0.388,6.294"></path>
								<path id="path4" d="M49.933,13.549c10.577-20.192,35.342-7.693,37.057,1.708c3.187-5.687,8.381-10.144,14.943-12.148
								c10.427-3.185,21.37,0.699,28.159,8.982c15.606-3.76,31.369,4.398,35.804,18.915c3.269,10.699-0.488,21.956-8.71,29.388
								c0.395,0.934,0.762,1.882,1.064,2.873c4.73,15.485-3.992,31.889-19.473,36.617c-5.073,1.551-10.251,1.625-15.076,0.518
								c-3.58,10.605-12.407,19.55-24.386,23.211c-15.015,4.586-30.547-0.521-39.226-11.624c-2.861,1.991-6.077,3.564-9.583,4.636
								c-18.43,5.631-32.291,2.419-38.074-19.661c-2.645-10.096,3.606-18.51,3.606-18.51C2.336,71.24,1.132,49.635,16.519,42.394
								C-1.269,28.452,18.559,0.948,37.433,6.818C42.141,8.282,49.933,13.549,49.933,13.549z"></path>
							</svg>
						</div>
					</div>
					<div class="tooltipcomic tooltipcomic-effect-2">
						<a href="#"><img src="https://iborra.es/web/wp-content/themes/dfd-ronneby_child/img/tooltipcomic-flip.png" alt="tooltipcomic"><h4>Efecto 2</h4></a>
						<span class="tooltipcomic-content">¡Hola! Soy un <span style="color:#c39f76">Tooltip</span> dentro de un diálogo de comic.</span>
						<div class="tooltipcomic-shape">
							<svg viewBox="0 0 200 150" preserveAspectRatio="none">
								<polygon points="29.857,3.324 171.111,3.324 196.75,37.671 184.334,107.653 104.355,136.679 100,146.676 96.292,136.355 16.312,107.653 3.25,37.671"></polygon>
							</svg>
						</div>
					  </div>
                    </div>
                    
<!--  TOOLTIP CURVED  -->                     

					<div class="dummy dummy-image">
					<div class="dummy-pois">
						<div class="tooltipcurved tooltipcurved-west">
							<span class="tooltipcurved-item"></span>
							<span class="tooltipcurved-content">Soy un <span style="color:#c39f76">Tooltip</span> idóneo para poner en un mapa.</span>
						</div>
						<div class="tooltipcurved tooltipcurved-east">
							<span class="tooltipcurved-item"></span>
							<span class="tooltipcurved-content">Soy un <span style="color:#c39f76">Tooltip</span> idóneo para poner en un mapa.</span>
						</div>
					</div>
				    </div>
                    
<!--  TOOLTIP FLIP  -->                     
                    
					<div class="dummy dummy-menu">
					<ul>
						<li>
							<a class="tooltipflip tooltipflip-effect-1" href="#"><i style="color:#c39f76;" class="fa fa-fw fa-camera-retro"></i>
								<span class="tooltipflip-content">
									<span class="tooltipflip-front"><img src="https://iborra.es/web/wp-content/themes/dfd-ronneby_child/img/tooltipcomic-flip.png" alt="tooltipcomic-flip"></span>
									<span class="tooltipflip-back">Efecto 1</span>
								</span>
							</a>
						</li>
						<li>
							<a class="tooltipflip tooltipflip-effect-2" href="#"><i style="color:#c39f76;" class="fa fa-fw fa-paint-brush"></i>
								<span class="tooltipflip-content">
									<span class="tooltipflip-front"><img src="https://iborra.es/web/wp-content/themes/dfd-ronneby_child/img/tooltipcomic-flip.png" alt="tooltipcomic-flip"></span>
									<span class="tooltipflip-back">Efecto 2</span>
								</span>
							</a>
						</li>
						<li>
							<a class="tooltipflip tooltipflip-effect-3" href="#"><i style="color:#c39f76;" class="fa fa-fw fa-file-text"></i>
								<span class="tooltipflip-content">
									<span class="tooltipflip-front"><img src="https://iborra.es/web/wp-content/themes/dfd-ronneby_child/img/tooltipcomic-flip.png" alt="tooltipcomic-flip"></span>
									<span class="tooltipflip-back">Efecto 3</span>
								</span>
							</a>
						</li>
					</ul>
				    </div>
                
<!--  TOOLTIP LINE  -->                
                
					<div class="dummy dummy-menu">
					<ul>
						<li>
							<a class="tooltipline" href="#"><i style="color:#c39f76;" class="fa fa-fw fa-envelope-o"></i><span class="tooltipline-content"><span class="tooltipline-text"><span class="tooltipline-inner">¡Hola! Soy un <strong style="color:#c39f76;">Tooltip</strong> que te avisa que tienes 5 mensajes nuevos en tu correo.</span></span></span></a>
						</li>
					</ul>
				    </div>
                
<!--  TOOLTIP ROUND  -->                 
                
					<div class="dummy dummy-menu">
					<ul>
						<li><a class="tooltipround tooltipround-effect-1" href="#">Efecto 1<span class="tooltipround-content"><i class="fa fa-fw fa-home"></i></span></a></li>
						<li><a class="tooltipround tooltipround-effect-2" href="#">Efecto 2<span class="tooltipround-content"><i class="fa fa-fw fa-user"></i></span></a></li>
						<li><a class="tooltipround tooltipround-effect-3" href="#">Efecto 3<span class="tooltipround-content"><i class="fa fa-fw fa-camera-retro"></i></span></a></li>
						<li><a class="tooltipround tooltipround-effect-4" href="#">Efecto 4<span class="tooltipround-content"><i class="fa fa-fw fa-briefcase"></i></span></a></li>
						<li><a class="tooltipround tooltipround-effect-5" href="#">Efecto 5<span class="tooltipround-content"><i class="fa fa-fw fa-envelope"></i></span></a></li>
					</ul>
				    </div>
                
<!--  TOOLTIP SHARP  -->                
                
						<div class="dummy">
						<p>Esto es un ejemplo de Tooltip Sharp a la <span class="tooltipsharp tooltipsharp-turnright"><span class="tooltipsharp-item">izquierda</span><span class="tooltipsharp-content">Soy un <span style="color:#c39f76">Tooltip</span> muy elegante situado en el lado izquierdo.</span></span> y a la <span class="tooltipsharp tooltipsharp-turnleft"><span class="tooltipsharp-item">derecha</span><span class="tooltipsharp-content">Soy un <span style="color:#c39f76">Tooltip</span> muy elegante situado en el lado derecho.</span></span>.</p>
				        </div><br>
              
            
!

CSS

              
                /***  TOOLTIP BLOATED  ***/

.tooltipbloated {
	display: inline;
	position: relative;
	z-index: 999;
}

.tooltipbloated-content {
	position: absolute;
	background: url('https://iborra.es/web/wp-content/themes/dfd-ronneby_child/img/tooltipbloated.png') no-repeat center bottom;
	background-size: 100% 100%;
	z-index: 9999;
	width: 140px;
	bottom: 100%;
	left: 50%;
	margin-left: -100px;
	padding: 50px 30px;
	text-align: center;
	color: #fff;
	opacity: 0;
	cursor: default;
	font-size: 0.75em;
	line-height: 1.4;
	pointer-events: none;
	font-family: 'Kalam', cursive;
	-webkit-transform: scale3d(0.1,0.2,1);
	transform: scale3d(0.1,0.2,1);
	-webkit-transform-origin: 50% 120%;
	transform-origin: 50% 120%;
	-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
	transition: opacity 0.4s, transform 0.4s;
	-webkit-transition-timing-function: ease, cubic-bezier(0.6,0,0.4,1);
	transition-timing-function: ease, cubic-bezier(0.6,0,0.4,1);
}

.tooltipbloated:hover .tooltipbloated-content {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

/* Arrow */

.tooltipbloated-content::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	left: 50%;
	margin-left: -8px;
	top: 99%;
	background: #282828;
	-webkit-transform: translate3d(0,-60%,0) rotate3d(0,0,1,45deg);
	transform: translate3d(0,-60%,0) rotate3d(0,0,1,45deg);
}

.dummy-menu {
    max-width: 100%;
    padding: 4em 1em;
}

.dummy {
    padding: 1em;
    margin: 0 auto;
    font-weight: 300;
}

.dummy-menu ul, .dummy-team ul {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0 0 1em !important;
}

.dummy-menu-icons ul li {
    width: 2em;
    height: 2em;
    font-size: 2em;
    line-height: 1.75;
}

.dummy-menu ul li {
    display: inline-block;
    position: relative;
    margin: 0 1em;
    font-size: 1.5em;
}

.dummy-menu ul li a {
    display: inline-block;
    font-weight: 700;
    padding: 0.15em 0.25em 0;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
                    
/***  TOOLTIP BOX  ***/

.tooltipbox {
	display: inline;
	position: relative;
	z-index: 999;
}

/* Trigger text */

.tooltipbox-item {
	color: #c39f76;
	cursor: pointer;
	z-index: 100;
	position: relative;
	display: inline-block;
	font-weight: 700;
	-webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s;
	transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

.tooltipbox:hover .tooltipbox-item {
	color: #fff;
	-webkit-transform: translate3d(0,-0.5em,0);
	transform: translate3d(0,-0.5em,0);
}

/* Tooltip */

.tooltipbox-content {
	position: absolute;
	z-index: 99;
	width: 320px;
	left: 50%;
	margin-left: -180px;
	bottom: -5px;
	text-align: left;
	background: #282828;
	opacity: 0;
	font-size: 0.75em;
	text-align: center;
	line-height: 1.5;
	padding: 1.5em;
	color: #fff;
	border-bottom: 50px solid #c39f76;
	cursor: default;
	pointer-events: none;
	border-radius: 5px;
	font-family: 'Kalam', cursive;
	-webkit-transform: translate3d(0,-0.5em,0);
	transform: translate3d(0,-0.5em,0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipbox-content a {
	color: #c39f76;
}
.tooltipbox-content a:hover {
	color: #9f8465;
}

.tooltipbox-text {
	opacity: 0;
	-webkit-transform: translate3d(0,1.5em,0);
	transform: translate3d(0,1.5em,0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipbox:hover .tooltipbox-content,
.tooltipbox:hover .tooltipbox-text {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.dummy-text {
    max-width: 1000px;
    font-size: 17px !Important;
}

.dummy {
    padding: 1em;
    margin: 0 auto;
    font-weight: 300;
}

.dummy-text p {
    margin-top: 0;
    line-height: 1.8;
    text-align: center !Important;
}

/***  TOOLTIP CLASSIC  ***/

.tooltipclassic {
	display: inline;
	position: relative;
	z-index: 999;
}

/* Trigger text */

.tooltipclassic-item {
	background: #282828;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-weight: 400;
	padding: 0 10px;
	border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

/* Gap filler */

.tooltipclassic-item::after {
	content: '';
	position: absolute;
	width: 360px;
	height: 20px;
	bottom: 100%;
	left: 50%;
	pointer-events: none;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.tooltipclassic:hover .tooltipclassic-item::after {
	pointer-events: auto;
}

/* Tooltip */

.tooltipclassic-content {
	position: absolute;
	z-index: 9999;
	width: 360px;
	left: 50%;
	margin: 0 0 20px -180px;
	bottom: 100%;
	text-align: left;
	font-size: 0.765em;
	line-height: 1.4;
	box-shadow: -5px -5px 15px rgba(48,54,61,0.2);
	background: #282828;
	opacity: 0;
	cursor: default;
	pointer-events: none;
	border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.tooltipclassic-effect-1 .tooltipclassic-content {
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipclassic-effect-2 .tooltipclassic-content {
	-webkit-transform-origin: 50% calc(100% + 10px);
	transform-origin: 50% calc(100% + 10px);
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,45deg);
	transform: perspective(1000px) rotate3d(1,0,0,45deg);
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
}

.tooltipclassic-effect-3 .tooltipclassic-content {
	-webkit-transform: translate3d(0,10px,0) rotate3d(1,1,0,25deg);
	transform: translate3d(0,10px,0) rotate3d(1,1,0,25deg);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipclassic-effect-4 .tooltipclassic-content {
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: scale3d(0.7,0.3,1);
	transform: scale3d(0.7,0.3,1);
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
}

.tooltipclassic-effect-5 .tooltipclassic-content {
	width: 180px;
	margin-left: -90px;
	-webkit-transform-origin: 50% calc(100% + 6em);
	transform-origin: 50% calc(100% + 6em);
	-webkit-transform: rotate3d(0,0,1,15deg);
	transform: rotate3d(0,0,1,15deg);
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
	-webkit-transition-timing-function: ease, cubic-bezier(.17,.67,.4,1.39);
	transition-timing-function: ease, cubic-bezier(.17,.67,.4,1.39);
}

.tooltipclassic:hover .tooltipclassic-content {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0);
	transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}

.tooltipclassic.tooltipclassic-effect-2:hover .tooltipclassic-content {
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,0deg);
	transform: perspective(1000px) rotate3d(1,0,0,0deg);
}

/* Arrow */

.tooltipclassic-content::before {
	content: '';
	top: 100%;
	left: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #282828;
	border-width: 10px;
	margin-left: -10px;
}

/* Tooltip content*/

.tooltipclassic-content img {
	position: relative;
	height: 170px;
	display: block;
	float: left;
	margin-right: 1em;
	border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.tooltipclassic-text {
	font-size: 1em;
	font-family: 'Kalam', cursive;
	line-height: 1.35;
	display: block;
	padding: 1.31em 1.21em 1.21em 0;
	color: #fff;
	text-align: center;
}

.tooltipclassic-effect-5 .tooltipclassic-text {
	padding: 1.4em;
}

.tooltipclassic-text a {
	font-weight: bold;
	color: #c39f76;
}

.tooltipclassic-text a:hover {
	font-weight: bold;
	color: #9f8465;
}

.dummy-text {
    max-width: 1000px;
    font-size: 1.65em;
}

.dummy {
    padding: 1em;
    margin: 0 auto;
    font-weight: 400;
}

.dummy-text p {
    margin-top: 0;
    line-height: 1.8;
    text-align: justify;
}
                    
/*** TOOLTIP COMIC  ***/                 

.tooltipcomic {
	position: relative;
	width: 210px;
	margin: 0 auto;
	font-family: 'Bangers', cursive;
}

.tooltipcomic-content {
	position: absolute;
	line-height: 1.2;
	pointer-events: none;
	text-align: center;
	z-index: 100;
	opacity: 0;
	padding: 1.75em;
	font-size: 14px;
	bottom: 100%;
}

.tooltipcomic-effect-1 .tooltipcomic-content {
	width: 130px;
	right: 83%;
	margin: 0 0 28px 0;
	color: #fff;
	-webkit-transform: scale3d(0,0,1);
	transform: scale3d(0,0,1);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipcomic-effect-2 .tooltipcomic-content {
	width: 170px;
	left: 50%;
  z-index: 1000;
	margin: 0 0 50px -110px;
	color: #fff;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipcomic-effect-1:hover .tooltipcomic-content {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

.tooltipcomic-effect-2:hover .tooltipcomic-content {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

/* Shape */
.tooltipcomic-shape {
	position: absolute;
	width: 220px;
	height: 165px;
	pointer-events: none;
}

.tooltipcomic-effect-1 .tooltipcomic-shape {
	top: 0;
	right: 65%;
	-webkit-transform: translate3d(0,-90%,0);
	transform: translate3d(0,-90%,0);
}

.tooltipcomic-effect-2 .tooltipcomic-shape {
	bottom: 100%;
  z-index: 999;
	left: 50%;
	margin: 0 0 0 -110px;
}

.tooltipcomic:hover .tooltipcomic-shape {
	pointer-events: auto;
}

.tooltipcomic-shape svg {
	stroke: #c39f76;
	stroke-width: 3;
}

.tooltipcomic-effect-1 .tooltipcomic-shape svg path {
	fill: #282828;
	opacity: 0;
	-webkit-transform: scale3d(0,0,1);
	transform: scale3d(0,0,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipcomic-effect-1:hover .tooltipcomic-shape svg path {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

.tooltipcomic-effect-1:hover .tooltipcomic-shape svg path#path2 {
	-webkit-transition-delay: 0.07s;
	transition-delay: 0.07s;
}

.tooltipcomic-effect-1:hover .tooltipcomic-shape svg path#path3 {
	-webkit-transition-delay: 0.14s;
	transition-delay: 0.14s;
}

.tooltipcomic-effect-1:hover .tooltipcomic-shape svg path#path4 {
	-webkit-transition-delay: 0.21s;
	transition-delay: 0.21s;
}

.tooltipcomic-effect-2 .tooltipcomic-shape svg polygon {
	fill: transparent;
	stroke-dasharray: 580;
	stroke-dashoffset: 580;
}

.tooltipcomic-effect-2:hover .tooltipcomic-shape svg polygon {
	stroke-dashoffset: 0;
	fill: #282828;
	-webkit-transition: stroke-dashoffset 0.8s, fill 0.8s;
	transition: stroke-dashoffset 0.8s, fill 0.8s;
}

.dummy-avatar {
    margin-top: 1em !important;
    text-align: center;
}

.dummy {
    padding: 1em;
    margin: 0 auto;
    font-weight: 300;
}

.dummy-avatar > div {
    display: inline-block;
    margin: 0 1em;
}

.dummy-avatar a {
    margin: 0 auto;
    display: block;
    text-align: center;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    text-decoration: none;
}

.dummy-avatar a img {
    border-radius: 50%;
}

.dummy-avatar a h4 {
    margin: 0.25em 0;
    line-height: 1;
    font-size: 17px;
    font-weight: 400;
	  color: #c39f76;
}
                    
/*** TOOLTIP CURVED  ***/                    

.tooltipcurved {
	position: absolute;
	z-index: 999;
	width: 2.2em;
	height: 2.2em;
	cursor: pointer;
}

/* Trigger item */

.tooltipcurved-item {
	width: 30px;
	height: 30px;
	left: 50%;
	top: 50%;
	margin: -15px 0 0 -15px;
	position: absolute;
	border-radius: 50%;
	border: 2px solid #c39f76;
	-webkit-animation: pulse 0.6s infinite alternate;
	animation: pulse 0.6s infinite alternate;
}

@-webkit-keyframes pulse {
	from { -webkit-transform: scale3d(0.5,0.5,1); }
	to { -webkit-transform: scale3d(1,1,1); }
}

@keyframes pulse {
	from { -webkit-transform: scale3d(0.5,0.5,1); transform: scale3d(0.5,0.5,1); }
	to { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
}

.tooltipcurved:hover .tooltipcurved-item {
	border-color: #282828;
}

.tooltipcurved:first-child {
	top: 20%;
	left: 20%;
}

.tooltipcurved:nth-child(2) {
	top: 50%;
	left: 10%;
}

.tooltipcurved:nth-child(3) {
	top: 40%;
	left: 50%;
}

.tooltipcurved:nth-child(4) {
	top: 70%;
	left: 70%;
}

/* Tooltip */

.tooltipcurved-content {
	position: absolute;
	background: #282828;
	z-index: 9999;
	width: 200px;
	bottom: 50%;
	margin-bottom: -1em;
	padding: 20px;
	border-radius: 20px;
	font-size: 15x;
  line-height: 18px;
	text-align: center;
	color: #fff;
	opacity: 0;
	cursor: default;
	pointer-events: none;
	font-family: 'Kalam', cursive;
	-webkit-font-smoothing: antialiased;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipcurved-west .tooltipcurved-content {
	left: 4em;
	-webkit-transform-origin: -2em 50%;
	transform-origin: -2em 50%;
	-webkit-transform: translate3d(0,50%,0) rotate3d(1,1,1,30deg);
	transform: translate3d(0,50%,0) rotate3d(1,1,1,30deg);
}

.tooltipcurved-east .tooltipcurved-content {
	right: 4em;
	-webkit-transform-origin: calc(100% + 2em) 50%;
	transform-origin: calc(100% + 2em) 50%;
	-webkit-transform: translate3d(0,50%,0) rotate3d(1,1,1,-30deg);
	transform: translate3d(0,50%,0) rotate3d(1,1,1,-30deg);
}

.tooltipcurved:hover .tooltipcurved-content {
	opacity: 1;
	-webkit-transform: translate3d(0,50%,0) rotate3d(0,0,0,0);
	transform: translate3d(0,50%,0) rotate3d(0,0,0,0);
	pointer-events: auto;
}

/* Gap "bridge" and arrow */

.tooltipcurved-content::before,
.tooltipcurved-content::after {
	content: '';
	position: absolute;
}

.tooltipcurved-content::before {
	height: 100%;
	width: 3em;
}

.tooltipcurved-content::after {
	width: 2em;
	height: 2em;
	top: 50%;
	margin: -1em 0 0;
	background: url('https://iborra.es/web/wp-content/themes/dfd-ronneby_child/img/tooltipcurved.png') no-repeat center center;
	background-size: 100%;
}

.tooltipcurved-west .tooltipcurved-content::before,
.tooltipcurved-west .tooltipcurved-content::after {
	right: 99%; /* because of FF, otherwise we have a gap */
}

.tooltipcurved-east .tooltipcurved-content::before,
.tooltipcurved-east .tooltipcurved-content::after {
	left: 99%; /* because of FF, otherwise we have a gap */
}

.tooltipcurved-east .tooltipcurved-content::after {
	-webkit-transform: scale3d(-1,1,1);
	transform: scale3d(-1,1,1);
}

.dummy-image {
    position: relative;
	  margin: 30px 0 75px 680px !important;
}

.dummy {
    padding: 1em;
    margin: 0 auto;
    font-weight: 300;
}
                    
/***  TOOLTIP FLIP  ***/                     
                    
.tooltipflip {
	display: inline;
	position: relative;
	z-index: 999;
}

/* Gap filler */
.tooltipflip::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 20px;
	bottom: 100%;
	pointer-events: none;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.tooltipflip:hover::after {
	pointer-events: auto;
}

/* Tooltip */

.tooltipflip-content {
	position: absolute;
	z-index: 9999;
	width: 160px;
	height: 80px;
	left: 50%;
	margin-left: -80px;
	bottom: 100%;
	text-align: center;
	color: #fff;
	opacity: 0;
	margin-bottom: 20px;
	cursor: default;
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipflip-effect-1 .tooltipflip-content {
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
}

.tooltipflip-effect-2 .tooltipflip-content {
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}

.tooltipflip-effect-3 .tooltipflip-content {
	-webkit-transform: translate3d(0,10px,0) rotate3d(0,0,1,5deg);
	transform: translate3d(0,10px,0) rotate3d(0,0,1,5deg);
}

.tooltipflip:hover .tooltipflip-content {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.tooltipflip-content > span {
	float: left;
	width: 50%;
	height: 100%;
	position: relative;
	font-size: 13px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.tooltipflip-content > span img {
	display: block;
	max-width: 60px;
	margin: 10px;
}

.tooltipflip-front {
	background: #333;
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-transform: perspective(1000px) rotate3d(0,1,0,-90deg);
	transform: perspective(1000px) rotate3d(0,1,0,-90deg);
}

.tooltipflip-back {
	background: #282828;
	font-size: 0.5em;
	padding: 0;
  display: grid;
  align-content: center;
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transform: perspective(1000px) rotate3d(0,1,0,90deg);
	transform: perspective(1000px) rotate3d(0,1,0,90deg);
}

.tooltipflip:hover .tooltipflip-content > span {
	-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
	transform: perspective(1000px) rotate3d(0,1,0,0deg);
}

/* Arrow */
.tooltipflip-content .tooltipflip-front::after,
.tooltipflip-content .tooltipflip-back::after {
	content: '';
	position: absolute;
	top: 100%;
	width: 0;
	height: 0;
}

.tooltipflip-content .tooltipflip-front::after {
	right: 0;
	border-top: 10px solid #333;
	border-left: 10px solid transparent;
}

.tooltipflip-content .tooltipflip-back::after {
	left: 0;
	border-top: 10px solid #282828;
	border-right: 10px solid transparent;
}

.dummy-menu {
    max-width: 100%;
    padding: 4em 1em;
}

.dummy {
    padding: 1em;
    margin: 0 auto;
    font-weight: 300;
}

.dummy-menu ul, .dummy-team ul {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0 0 3em;
}

.dummy-menu ul li {
    display: inline-block;
    position: relative;
    margin: 0 1em;
    font-size: 1.5em;
}

.dummy-menu ul li a {
    display: inline-block;
    font-weight: 700;
    padding: 0.15em 0.25em 0;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

/***  TOOLTIP LINE  ***/               
                
.tooltipline {
	display: inline;
	position: relative;
	z-index: 999;
}

/* Gap filler */
.tooltipline::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 20px;
	bottom: 100%;
	left: 50%;
	pointer-events: none;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.tooltipline:hover::after {
	pointer-events: auto;
}

/* Tooltip */

.tooltipline-content {
	position: absolute;
	z-index: 9999;
	width: 300px;
	left: 50%;
	bottom: 100%;
	font-size: 20px;
	line-height: 1.4;
	text-align: center;
	font-weight: 400;
	color: #fff;
	background: transparent;
	opacity: 0;
	margin: 0 0 20px -150px;
	cursor: default;
	pointer-events: none;
	font-family: 'Satisfy', cursive;
	-webkit-font-smoothing: antialiased;
	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.tooltipline:hover .tooltipline-content {
	opacity: 1;
	pointer-events: auto;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.tooltipline-content span {
	display: block;
}

.tooltipline-content strong {
	font-weight:normal;
}

.tooltipline-text {
	border-bottom: 10px solid #c39f76;
	overflow: hidden;
	-webkit-transform: scale3d(0,1,1);
	transform: scale3d(0,1,1);
	-webkit-transition: -webkit-transform 0.3s 0.3s;
	transition: transform 0.3s 0.3s;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	-moz-border-bottom-left-radius: 6px;
	-moz-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
}

.tooltipline:hover .tooltipline-text {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

.tooltipline-inner {
	background: #282828;
	padding: 40px;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
	webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	-moz-border-top-left-radius: 6px;
	-moz-border-top-right-radius: 6px;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
}

.tooltipline:hover .tooltipline-inner {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* Arrow */

.tooltipline-content::after {
	content: '';
	bottom: -20px;
	left: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #c39f76;
	border-width: 10px;
	margin-left: -10px;
}

.dummy-menu {
    max-width: 100%;
    padding: 4em 1em;
}

.dummy {
    padding: 1em;
    margin: 0 auto;
    font-weight: 300;
}

.dummy-menu ul, .dummy-team ul {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0 0 3em;
}

.dummy-menu ul li {
    display: inline-block;
    position: relative;
    margin: 0 1em;
    font-size: 1.5em;
}

.dummy-menu ul li a {
    display: inline-block;
    font-weight: 700;
    padding: 0.15em 0.25em 0;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

/***  TOOLTIP ROUND  ***/                
                
.tooltipround {
	display: inline;
	position: relative;
	z-index: 999;
}

/* Tooltip */

.tooltipround-content {
	position: absolute;
	z-index: 9999;
	width: 80px;
	height: 50px;
	padding-top: 25px;
	left: 50%;
	margin-left: -40px;
	bottom: 100%;
	border-radius: 50%;
	text-align: center;
	background: #282828;
	color: #fff;
	opacity: 0;
	margin-bottom: 20px;
	cursor: default;
	pointer-events: none;
}

.tooltipround-content i {
	opacity: 0;
}

.tooltipround:hover .tooltipround-content,
.tooltipround:hover .tooltipround-content i {
	opacity: 1;
}

.tooltipround-effect-1 .tooltipround-content {
	-webkit-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
	transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipround-effect-1 .tooltipround-content i {
	-webkit-transform: scale3d(0,0,1);
	transform: scale3d(0,0,1);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipround-effect-2 .tooltipround-content {
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipround-effect-2 .tooltipround-content i {
	-webkit-transform: translate3d(0,15px,0);
	transform: translate3d(0,15px,0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipround-effect-3 .tooltipround-content {
	-webkit-transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);
	transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipround-effect-3 .tooltipround-content i {
	-webkit-transform: scale3d(0,0,1);
	transform: scale3d(0,0,1);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipround-effect-4 .tooltipround-content {
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipround-effect-4 .tooltipround-content i {
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipround-effect-5 .tooltipround-content {
	-webkit-transform: scale3d(0,0,1);
	transform: scale3d(0,0,1);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipround-effect-5 .tooltipround-content i {
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipround:hover .tooltipround-content,
.tooltipround:hover .tooltipround-content i {
	pointer-events: auto;
	-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
	transform: translate3d(0,0,0) scale3d(1,1,1);
}

.tooltipround-effect-1:hover .tooltipround-content i {
	-webkit-transform: rotate3d(1,1,1,0);
	transform: rotate3d(1,1,1,0);
}

/* Arrow */

.tooltipround-content::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin: -7px 0 0 -15px;
	width: 30px;
	height: 20px;
	background: url('https://iborra.es/web/wp-content/themes/dfd-ronneby_child/img/tooltipround.png') no-repeat center center;
	background-size: 100%;

}

.dummy-menu {
    max-width: 100%;
    padding: 4em 1em;
}

.dummy {
    padding: 1em;
    margin: 0 auto;
    font-weight: 300;
}

.dummy-menu ul, .dummy-team ul {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0 0 3em;
}

.dummy-menu ul li {
    display: inline-block;
    position: relative;
    margin: 0 1em;
    font-size: 19px;
	font-family: 'Lato';
}

.dummy-menu ul li a {
    display: inline-block;
    color: #c39f76;
    text-decoration: none;
    font-weight: 700;
    padding: 0.15em 0.25em 0;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

/*** TOOLTIP SHARP  ***/               
                
.tooltipsharp {
	position: relative;
	z-index: 999;
}

/* Trigger text */

.tooltipsharp-item {
	font-weight: bold;
	cursor: pointer;
	color: #c39f76;
}

.tooltipsharp-content {
	position: absolute;
	font-size: 16px;
	background: #282828;
	font-family: 'Kalam', cursive;
	z-index: 9999;
	width: 270px;
	bottom: 100%;
	left: 50%;
	margin: 0 0 105px -164px;
	padding: 25px;
	text-align: center;
	border-radius: 10px/50%;
	color: #fff;
	opacity: 0;
	cursor: default;
	pointer-events: none;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltipsharp-turnright .tooltipsharp-content {
	-webkit-transform: translate3d(0,50px,0) rotate3d(1,1,1,6deg);
	transform: translate3d(0,50px,0) rotate3d(1,1,1,6deg);
}

.tooltipsharp-turnleft .tooltipsharp-content {
	-webkit-transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg);
	transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg);
}

.tooltipsharp:hover .tooltipsharp-content {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* Arrow */

.tooltipsharp-content::after {
	content: '';
	position: absolute;
	width: 60px;
	height: 120px;
	top: 100%;
	background: url('https://iborra.es/web/wp-content/themes/dfd-ronneby_child/img/tooltipsharp.png') no-repeat center center;
	background-size: 100%;
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.tooltipsharp-turnright .tooltipsharp-content::after {
	left: 25%;
	-webkit-transform: scale3d(-1,1,1) rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
	transform: scale3d(-1,1,1) rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
}

.tooltipsharp-turnleft .tooltipsharp-content::after {
	right: 25%;
	-webkit-transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
	transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
}

.tooltipsharp-turnright:hover .tooltipsharp-content::after {
	-webkit-transform: scale3d(-1,1,1) rotate3d(1,1,1,0) translate3d(0,-5px,0);
	transform: scale3d(-1,1,1) rotate3d(1,1,1,0) translate3d(0,-5px,0);
}

.tooltipsharp-turnleft:hover .tooltipsharp-content::after {
	-webkit-transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
	transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
}

.dummy {
    padding: 1em;
    text-align: center;
    margin: 0 auto;
    font-weight: 300;
}
              
            
!

JS

              
                
              
            
!
999px

Console