“EFECTO TOOLTIP” PARA PÁGINAS DE CUENTOS BILINGÜES

Nota: pasa el ratón sobre las palabras en color azul o resaltadas en azul del párrafo de abajo, para comprobar lo que es:
He utilizado el “Efecto Tooltip” “Efecto Tooltip”: lo estás viendo ahora mismo, a ésto me refiero con ello; al pulsar en la palabra resaltada en el texto, aparece una ventana o “bocadillo” contextual, con información adicional, en el que podemos aprovechar para ampliar o matizar dicha información, para hacer una definición, o para traducir el texto si está en otro idioma. que en argot de diseño web se traduce como “efecto ventana de ayuda contextual”, para las páginas de la Web de Inglés de la Escuela Oficial de Idiomas Portal de Inglés de la E.O.I., en la dirección web ingleseoi.es, donde se enlazan recursos de inglés complementarios a los libros English File y Speakout, para los estudiantes de este idioma de la Escuela Oficial de Idiomas, o para los que estudien por su cuenta inglés con ayuda de los libros mencionados. dedicadas a contener cuentos de autores clásicos en inglés con su traducción párrafo a párrafo al español, al pasar el ratón o pulsar (en un móvil o tablet) en uno de estos párrafos.

Los cuentos subidos son todos de Nivel Básico, pues no superan las 500 palabras diferentes de vocabulario, se trata de ediciones simplificadas, con el fin de facilitar su compresión al lector, de cuentos de autores clásicos británicos y estadounidenses, y son:

  1. The Isle of Voices de Robert Louis Stevenson
  2. The Canterville Ghost de Oscar Wilde
  3. Y Four Tales: The Plague Cellar de Robert Louis Stevenson, The £1,000,000 Bank Note de Mark Twain, Mr Medhurst and the Princess de William Wilkie Collins y To Build a Fire de Jack London

Este “Efecto Tooltip”, lo he sacado gracias a Tympanus/Codrops, descargado de “Tooltip Styles Inspiration“. En la página de “The Isle Of Voices”, apenas hay modificaciones con respecto a la demo de Tympanus/Codrops.

En la de “The Canterville Ghost”, he utilizado otra plantilla de Tympanus/Codrops: Fullscreen Pageflip Layout, a la que he añadido el CSS de la “Tooltip Styles Inspiration” con unas ligerísimas modificaciones.

Y en la de “Four Tales”, he obrado como en la anterior, añadiendo el CSS necesario para obtener el “Efecto Tooltip”, teniendo como base una plantilla de Codyhouse, denominada “Expandable Project Presentation“.

 

EFECTO TOOLTIP EN WORDPRESS

Como habéis podido  comprobar en este post, también es posible añadir este efecto a nuestro Blog de WordPress. A continuación explico cómo paso a paso:

1º.- Siguiendo el Tutorial de Silo Creativo, que nos recomienda instalar el Plugin de WordPress Jetpack, he activado en dicho plugin el módulo de “CSS personalizado”Como no me gusta repetir lo que otros antes ya han dejado escrito y bien explicado, recomiendo que le echéis un vistazo al post de Silo Creativo. Una vez activado el Css personalizado, para acceder a él tan sólo hay que clicar en “Apariencia” del Escritorio de WordPress, y seleccionar “CSS personalizado”.

2º.- Asi que he ido a editar el CSS, en “CSS personalizado” y he añadido el siguiente código:

@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
/*TOOLTIP*/
.tooltip {
	display: inline;
	position: relative;
	z-index: 999;
}

/* Trigger text */
.tooltip-item {
	color: #2fa0ec;
	cursor: pointer;
	z-index: 100;
	position: relative;
	display: inline-block;
	font-weight: 700;
	-webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform .3s;
	transition: background-color 0.3s, color 0.3s, transform .3s;
}

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

/* Tooltip */
.tooltip-content {
	position: absolute;
	z-index: 99;
	width: 360px;
	left: 50%;
	margin-left: -180px;
	bottom: -5px;
	text-align: left;
	background: #2fa0ec;
	opacity: 0;
	font-size: .75em;
	line-height: 1.5;
	padding: 1.5em;
	color: #fff;
	border-bottom: 65px solid #2a3035;
	cursor: default;
	pointer-events: none;
	border-radius: 5px;
	font-family: 'Indie Flower', cursive;
	-webkit-transform: translate3d(0,-0.5em,0);
	transform: translate3d(0,-0.5em,0);
	-webkit-transition: opacity 0.3s, -webkit-transform .3s;
	transition: opacity 0.3s, transform .3s;
}

.tooltip-content a {
	color: #32434f;
}

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

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

/* Trigger text */
.tooltip-item1 {
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
	padding: 0 10px;
	background: lightblue;
}

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

.tooltip:hover .tooltip-item1::after {
	pointer-events: auto;
}

/* Tooltip */
.tooltip-content1 {
	position: absolute;
	z-index: 9999;
	width: 360px;
	left: 30%;
	margin: 0 0 20px -180px;
	bottom: 100%;
	text-align: left;
	font-size: 1.2em;
	line-height: 1.2;
	box-shadow: -5px -5px 15px rgba(48,54,61,0.2);
	background: green;
	opacity: 0;
	cursor: default;
	pointer-events: none;
}

.tooltip-effect-2 .tooltip-content1 {
	width: 360px;
	margin-left: -90px;
	padding-left: 2%;
	-webkit-transform-origin: 50% calc(100% + 10px);
	transform-origin: 50% calc(100% + 10px);
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,180deg);
	transform: perspective(1000px) rotate3d(1,0,0,180deg);
	-webkit-transition: opacity 0.2s, -webkit-transform .8s;
	transition: opacity 0.2s, transform .8s;
}

.tooltip-effect-3 .tooltip-content1 {
	width: 300px;
	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 .2s;
	transition: opacity 0.2s, transform .2s;
	-webkit-transition-timing-function: ease, cubic-bezier(.17,.67,.4,1.39);
	transition-timing-function: ease, cubic-bezier(.17,.67,.4,1.39);
}

.tooltip:hover .tooltip-content1 {
	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);
}

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

/* Arrow */
.tooltip-content1::after {
	content: '';
	top: 100%;
	left: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: green;
	border-width: 10px;
	margin-left: -10px;
}

/* Tooltip content*/
.tooltip-content1 img {
	position: relative;
	height: 170px;
	display: block;
	float: left;
	margin-right: 1em;
}

.tooltip-text1 {
	font-size: .68em;
	line-height: 1.35;
	display: block;
	padding: 1.31em 1.21em 1.21em 0;
	color: #fff;
}

.tooltip-effect-3 .tooltip-text1 {
	padding: 1.4em;
}

.tooltip-text1 a {
	font-weight: bold;
}

Y he clicado, en la derecha, en el botón “Guardar hoja de estilo”.

3º.- Y ahora ya sólo falta incorporar tal CSS u hoja de estilos en nuestros textos. Para ello, utilizaremos, en nuestro editor de textos de WordPress, la vista “Texto”, en lugar de la “Visual”:

A.- Para obtetener este efectoUn efecto que vamos a llamar “Efecto Box” y que queda bastante resultón. que destaca en azul oscuro la palabras o palabras resaltadas y deja bajo un fondo azul, en una bonita caligrafía, nuestras explicaciones adicionales, debemos emplear el siguiente código:

<span class="tooltip"><span class="tooltip-item">
Este es el texto que se ve
</span><span class="tooltip-content clearfix"><span class="tooltip-text">
Y aquí pondremos el texto que sólo se verá al pasar el ratón o pulsar, si estamos en una tablet o móvil, sobre él, esto es, el texto contextual.
</span></span></span>. A partir de aquí añadimos lo que haga falta sin ponerlo entre código, pues es "texto normal".


Este es el texto que se ve

Y aquí pondremos el texto que sólo se verá al pasar el ratón o pulsar, si estamos en una tablet o móvil, sobre él, esto es, el texto contextual.
. A partir de aquí añadimos lo que haga falta sin ponerlo entre código, pues es “texto normal”.

B.- Para conseguir este otro efectoA él nos vamos a referir como “Efecto bocadillo 180 grados”., en el que parece que voltee sobre el texto de color de fondo azul claro, un bocadillo en fondo verde, tendremos que usar este otro código:

<span class="tooltip tooltip-effect-2"><span class="tooltip-item1">
Este es el texto que quedará sobre un fondo azul clarito,
</span><span class="tooltip-content1 clearfix"><span class="tooltip-text1">
Y este otro texto es el que aparecerá en el bocadillo de color verde esmeralda.
</span></span></span>, y a partir de aquí, el "texto normal".

C.- Y para este tercer efectoQue lo voy a llamar “efecto bocadillo con rebote”, si os parece bien., en el que sale el bocadillo de texto desde la derecha con un pequeño efecto rebote, utilizaremos un código muy parecido al anterior:

<span class="tooltip tooltip-effect-3"><span class="tooltip-item1">
Este es el texto resaltado en fondo azul claro
</span><span class="tooltip-content1 clearfix"><span class="tooltip-text1">
Y aquí esribiremos el texto que va a aparecer en el "bocadillo".
</span></span></span>, y a partir de aquí, el "texto normal".

Por supuesto, podemos personalizar con otros colores, otras dimensiones, otros tipos y tamaños de letras, etc., la hoja de estilos añadida, así como podemos emplear otros de los muchos efectos que desarrolla Tympanus/Codrops en su tutorial, parecidos, pero con matices distintos a los que yo he elegido.