Tooltip no es una palabra que pueda traducirse con facilidad. Son ventanitas, generalmente de fondo amarillo o gris que aparecen cuando colocamos el puntero del rat\u00f3n sobre un objeto de la pantalla.<\/p>\n
Por ejemplo, a los links se le puede poner un title que se utiliza para que cuando se pase el rat\u00f3n por encima del link se vea un texto que puede mostrar algo de informaci\u00f3n sobre el link, pero esto sirve para muy poco, sin embargo, es posible crear algo que funcione de manera similar pero m\u00e1s interesante. Y para esto, basta tener una peque\u00f1a idea de como funcionan las hojas de estilo.<\/p>\n
La clave para tener tooltips con un estilo o dise\u00f1o es utilizar las t\u00e9cnicas CSS de la siguiente forma:<\/p>\n
Podemos declarar las siguientes clases CSS para tener unos tooltips m\u00e1s interesantes:<\/p>\n
a.Ntooltip {\r\nposition: relative; \/* es la posici\u00f3n normal *\/\r\ntext-decoration: none !important; \/* forzar sin subrayado *\/\r\ncolor:#0080C0 !important; \/* forzar color del texto *\/\r\nfont-weight:bold !important; \/* forzar negritas *\/\r\n}\r\n\r\na.Ntooltip:hover {\r\nz-index:999; \/* va a estar por encima de todo *\/\r\nbackground-color:#000000; \/* DEBE haber un color de fondo *\/\r\n}\r\n\r\na.Ntooltip span {\r\ndisplay: none; \/* el elemento va a estar oculto *\/\r\n}\r\n\r\na.Ntooltip:hover span {\r\ndisplay: block; \/* se fuerza a mostrar el bloque *\/\r\nposition: absolute; \/* se fuerza a que se ubique en un lugar de la pantalla *\/\r\ntop:1em; left:1em; \/* donde va a estar *\/\r\nwidth:250px; \/* el ancho por defecto que va a tener *\/\r\npadding:5px; \/* la separaci\u00f3n entre el contenido y los bordes *\/\r\nbackground-color: #0080C0; \/* el color de fondo por defecto *\/\r\ncolor: #FFFFFF; \/* el color de los textos por defecto *\/\r\n\r\n}<\/pre>\nEl dise\u00f1o del tooltip es totalmente editable a trav\u00e9s de CSS, tama\u00f1os, colores…Luego en el <body> tener algo como lo siguiente:<\/p>\n
<a href=\"#\">enlace\r\n\u00a0\u00a0\u00a0\u00a0 <span><table cellspacing=\"5\" cellpadding=\"2\" border=\"0\" style=\"border: 1px solid rgb(231, 87, 59);\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td align=\"center\"><b>Zzril delenit augue<\/b><\/td>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td><img height=\"100\" width=\"100\" src=\"POST_1.png\"\/><\/td>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td style=\"padding: 10px;\" colspan=\"2\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <p style=\"border: 1px dotted rgb(252, 217, 197); padding: 10px;\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<\/p>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/td>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\r\n\u00a0\u00a0\u00a0 <\/table><\/span>\r\n<\/a><\/pre>\nEn este caso, la idea es que al pasar el rat\u00f3n por encima del enlace se muestre la tabla que hay dentro del <span>.<\/p>\n