Hola. He tratado de poner un tip a un submit y no me ha resultado (con css no con title). Me cambia de color del submit, pero de tooltip nada. Gracias de antemano. Acá va el php. Un ejemplo de tooltip de submit también serviría.
<html>
<head>
<title>NEO</title>
<!-- <link href="style.css" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Sofia" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="neo2.css<?php echo '?'.mt_rand(); ?>" />
</head>
<body>
<form method="post">
<input type="text" name="r1" maxlength="1" size="1" value="1">
<div class="tooltip top">
<input type="submit" tooltip="Mi tip" name="aceptar" value="Aceptar">
</div>
</form>
</body>
</html>
Acá el css
body {
font-family: 'Sofia';font-size: 22px;
}
input[type="text"] {
font-family: 'Sofia';font-size: 22px;
}
input[type="submit"] {
background: none repeat scroll 0 0 #66A3D2;
border-color: #FFFFFF #327CB5 #327CB5 #FFFFFF;
border-radius: 10px 10px 10px 10px;
border-style: solid;
border-width: 1px;
box-shadow: 1px 1px 3px #333333;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
padding: 5px;
text-align: center;
text-shadow: 1px 1px 1px #000000;
font-family: 'Sofia';font-size: 22px;
}
input[type="submit"]:hover {
background-color: black;
}
input[type="submit"]:active {
background-color: blue;
}
.tooltip {
position: relative;
display: inline-block;
/* border-bottom: 1px dotted black; */
}
.tooltip .input[type="submit"] {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 3px;
padding: 6px 0;
position: absolute;
z-index: 1;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.tooltip .input[type="submit"]::after {
content: "";
position: absolute;
border-width: 5px;
border-style: solid;
}
.tooltip:hover .input[type="submit"] {
visibility: visible;
}
.tooltip.left .input[type="submit"] {
top: -5px;
right: 110%;
}
.tooltip.left .input[type="submit"]::after{
margin-top: -5px;
top: 50%;
left: 100%;
border-color: transparent transparent transparent #2E2E2E;
}