Deprecated: Return type of Requests_Cookie_Jar::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 63 Deprecated: Return type of Requests_Cookie_Jar::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 73 Deprecated: Return type of Requests_Cookie_Jar::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 89 Deprecated: Return type of Requests_Cookie_Jar::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 102 Deprecated: Return type of Requests_Cookie_Jar::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 111 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 40 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 51 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 68 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 82 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 91 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 {"id":252,"date":"2010-06-16T13:31:18","date_gmt":"2010-06-16T11:31:18","guid":{"rendered":"https:\/\/www.pcpolis.es\/blog\/?p=252"},"modified":"2015-02-12T12:50:38","modified_gmt":"2015-02-12T10:50:38","slug":"tooltip-con-jquery","status":"publish","type":"post","link":"https:\/\/www.pcpolis.es\/blog\/css\/tooltip-con-jquery\/","title":{"rendered":"Tooltip con JQuery"},"content":{"rendered":"
Todo lo que a los ojos del usuario es sencillo y funcional: es bueno. De manera que practiquemos un poco m\u00e1s con las posibilidades que nos ofrece la librer\u00eda JQuery para mejorar y optimizar la presentaci\u00f3n del contenido de nuestra web.Un tooltip<\/strong> es ese peque\u00f1o letrero con fondo amarillo que nos muestra informaci\u00f3n adicional cuando situamos el puntero sobre un determinado enlace. Partiendo de ah\u00ed ha evolucioado hasta el punto en que ya podemos cargar contenidos mucho m\u00e1s complejos.\u00a0 Aqu\u00ed van unos cuantos ejemplos de c\u00f3mo se pueden combinar el c\u00f3digo javascript -especialmente la librer\u00eda JQuery- y las Hojas de Estilo (CSS) para conseguir estos resultados.<\/p>\n
Ej. 1 : Tooltip de Texto<\/h6>\n

Cuando sit\u00fae el puntero del rat\u00f3n sobre este enlace<\/a>, aparecer\u00e1 un peque\u00f1o texto de informaci\u00f3n. Al mover el puntero, la caja de texto se mover\u00e1 tambi\u00e9n mientras nos encontremos dentro de los l\u00edmites del enlace, y desaparecer\u00e1 cuando nos alejemos. Para conseguir este resultado necesitamos:<\/p>\n

    \n
  1. La librer\u00eda JQuery<\/li>\n
  2. Una funci\u00f3n JavaScript que permita a\u00f1adir un nuevo elemento html a la p\u00e1gina y otra\u00a0 que calcule la posici\u00f3n en la que estar\u00e1 situado el puntero del rat\u00f3n. Ambas en el fichero tooltip.js que m\u00e1s abajo se incluye con las anotaciones del autor.<\/li>\n
  3. Tambi\u00e9n necesitaremos una hoja de estilo que defina la apariencia de la caja de texto o elemento emergente.<\/li>\n<\/ol>\n<\/div>\n
    \n
    Ej. 2: Tooltip con Im\u00e1genes<\/h6>\n

    Galer\u00eda (sin Leyenda)<\/h2>\n