Deprecated: Creation of dynamic property wpdb::$categories is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php on line 760 Deprecated: Creation of dynamic property wpdb::$post2cat is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php on line 760 Deprecated: Creation of dynamic property wpdb::$link2cat is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php on line 760 Deprecated: Using ${var} in strings is deprecated, use {$var} instead in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/comment-template.php on line 1745 Deprecated: wp_getimagesize(): Implicitly marking parameter $image_info as nullable is deprecated, the explicit nullable type must be used instead in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/media.php on line 5180 Deprecated: Creation of dynamic property POMO_FileReader::$is_overloaded is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/streams.php on line 26 Deprecated: Creation of dynamic property POMO_FileReader::$_pos is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/streams.php on line 29 Deprecated: Creation of dynamic property POMO_FileReader::$_f is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/streams.php on line 160 Deprecated: Creation of dynamic property MO::$_gettext_select_plural_form is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/translations.php on line 293 Deprecated: Creation of dynamic property WP_Block_Type::$skip_inner_blocks is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-block-type.php on line 357 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php:760) 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-includes/wp-db.php:760) 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-includes/wp-db.php:760) 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-includes/wp-db.php:760) 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-includes/wp-db.php:760) 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-includes/wp-db.php:760) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php:760) 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-includes/wp-db.php:760) 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