Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Tooltip submit

CSS - Tooltip submit

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 1
Ha aumentado su posición en 14 puestos en CSS (en relación al último mes)
Gráfica de CSS

Tooltip submit

Publicado por Yan (2 intervenciones) el 26/05/2019 17:05:47
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.
Acá va el html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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;

}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Tooltip a submit

Publicado por Yan Klarin (2 intervenciones) el 26/05/2019 22:42:29
Ya lo pude hacer.
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<title>NEO3</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="neo3.css<?php echo '?'.mt_rand(); ?>" />
</head>
<body>
    <br><br><br>
    <form method="post">
        <input type="text" name="r1" maxlength="1" size="1" value="1">
        <div class="tooltip">
            <input type="submit" name="aceptar" value="Aceptar">
            <span class="tooltiptext">Tooltip Yancito</span>
        </div>
        <div class="tooltip">
            <input type="submit" name="salir" value="Salir">
            <span class="tooltiptext">Tooltip 2 Yancito</span>
        </div>
    </form>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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;  If you want dots under the hoverable text */
}
 
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;

  color: #fff;

  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  font-size: 12px;
 
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
 
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}
 
/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;

}
 
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar