Foros del Web - Ver Mensaje Individual - como modificar el atributo title en html como el facebook

emprear · #2 (**permalink**) 13/09/2011, 11:42

No se bien como trabaja el ejemplo de facebook, pero a eso genericamente se le denomina "tooltips"

Podés hacerlo solo con css

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100% Css Tooltip</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
/* tooltip */
span.info{position:relative;z-index:24;font-family: arial,sans-serif;color:#000;cursor: help;font-size: 8pt;text-decoration:none;font-weight: bold;}span.info:hover{z-index:25;}span.info span{display: none;}
span.info:hover span{display:block;position:absolute;height: auto;font-size: 8pt;font-weight: normal;top:2em; left:2em; width:35em;padding: 5px;border:1px dashed #172C0C;
background-color:#B3BD91; color:#000;text-align: left;}
/*]]>*/
</style>
</head>
<body>
<p>
<span class='info'>?<span>
<!-- aqui el contenido html del tooltip -->
La aplicación intentará detectar, si existiése, el juego de caracteres declarado en un metatag "Content-type" ó en algún header pasado por el servidor o php.<br />
Como la exploración solo identifica archivos utf-8, debería preocuparle fundamentalmente encontrar el valor "iso-8859-1", que hace visible la marca del bom.
 
<!-- fin tooltip -->
</span></span></p>
</body>
</html>

Cualquier elemento span con la clase "info" genera un tooltip para el contenido html del <span> anidado en el
demo:
http://foros.emprear.com/css/tooltip.html

y hay también numerosos pluginds de jQuery con opciones y efectos más avanzados
http://visionwidget.com/inspiration/...p-plugins.html

Saludos