El siguiente snippet nos mostrará como crear un sencillo pero efectivo tooltip que podemos implementar en nuestras interfaces web, para visualizar contenido adicional.

 

HTML

1
2
3
4
5
6
7
<div class="wrap">
<div class="a"></div>
<div class="b">
<h1>Titulo.</h1>
<p>Contenido del tooltip.</p>
</div>
</div>

 

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
.wrap {
position:relative;
margin-bottom: 50px ;
}

.a {
margin:0 auto;
width:0;
border-color: transparent transparent #29C8F5;
border-style: solid;
border-width: 1em;
}

.b {
position:relative;
margin:0 auto;
padding:0 20px;
height:auto;
width:8em;
background:#29C8F5;
color:#fff;
text-align:center;
overflow:auto;
border-radius:8px;
}

.c {
position:relative;
margin:0 auto;
padding:0 20px;
height:auto;
width:15em;
background:#FF871D;
color:#fff;
text-align:center;
overflow:auto;
border-radius:8px;
}

.d {
margin:0 auto;
width:0;
border-color: #FF871D transparent transparent;
border-style: solid;
border-width: 1em;
}

h1 { font-weight:100; }

p {
padding:0;
font-weight:100;
}

 

¡Pruebalo! ¡Pruebalo!

 

 

Te Puede Interesar

Simple menú dropdown con CSS

Crea un efecto de rotación sobre una imagen con texto en CSS

Contruye etiquetas (Tag) con CSS 

(Visited 275 times, 1 visits today)