lástima que :hover:after sólo funcione en chrome
Cita: span {
visibility: hidden;
}
input[id="todos"]:hover + span {
visibility: visible;
background-color: #282828;
color: #CCC;
font: 13px Verdana, Helvetica, sans-serif;
width: 150px;
height: 22px;
padding: 2.5px 4px;
border: 1px solid #424141;
border-radius: 0 12px 12px 0;
box-shadow: 2px 2px 5px #333;
}
input[id="chrome"]:hover:after {
content: "un texto cualquiera";
background-color: #282828;
color: #CCC;
font: 13px Verdana, Helvetica, sans-serif;
display: block;
width: 150px;
height: auto !important;
padding: 2.5px 4px;
position: relative;
top: -20px;
left: 153px;
border: 1px solid #424141;
border-radius: 0 12px 12px 0;
box-shadow: 2px 2px 5px #333;
}
<form>
<input type="text" value="TODOS LOS NAVEGADORES" name="txt" id="todos" /><span>un texto cualquiera</span>
<br />
<input type="text" value="CHROME" name="txt" id="chrome" />
</form>