Mostrar ventana emergente al posicionarse sobre celda en HTML

Hoy aprenderemos a crear una ventana emergente que nos muestre el contenido de una celda al posicionar el cursor sobre ella.

Para este ejemplo hemos creado una pagina web básica con puro html a la que hemos llamado index.html donde creamos una tabla con la información que queremos resaltar.

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
<!DOCTYPE html>
<html lang="es">
<head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script>
                var app = angular.module('validationApp', []);
 
                        app.controller('validateCtrl', function($scope) {
                                $scope.valor1 = "5";
                                $scope.valor2 = "3";
                                $scope.valor3 = "5";
                                $scope.valor4 = "3";
 
                });
                </script>
                <style>
                        table {
                                margin: auto;
                        }
                        th {
                                background-color: blue;
                                color: white;
                        }
                        th:first-child {
                                background-color: white;
                        }
                        h1 {
                                text-align: center;
                                font-size: 24px;
                        }
                </style>
        <meta charset="UTF-8">
        <title>Redondeo de Numeros</title>
</head>
<body>
        <h1>Ejemplo de Redondeo en AngularJS</h1>
        <br />
        <form action="#" ng-app="validationApp" ng-controller="validateCtrl">
                <table>
                        <tr>
                                <th></th>
                                <th>Numero 1</th>
                                <th>Numero 2</th>
                                <th>Resultado</th>
                        </tr>
                        <tr>
                                <td>Ejemplo sin Redondear</td>
                                <td><input type="text" ng-model="valor1" readonly></td>
                                <td><input type="text" ng-model="valor2" readonly></td>
                                <td>{{ valor1 / valor2 }}</td>
                        </tr>
                        <tr>
                                <td>Ejemplo Redondeado</td>
                                <td><input type="text" ng-model="valor3" readonly></td>
                                <td><input type="text" ng-model="valor4" readonly></td>
                                <td>{{ valor1 / valor2 | number:2 }}</td>
                        </tr>
                </table>
        </form>
</body>
</html>

 

Como vemos tenemos nuestra pagina enlazada con una hoja de estilos ubicada en la ruta css/estilos.css donde colocaremos en siguiente codigo.

 


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
h1 {
        margin-top: 50px;
        text-align: center;
        font-size: 24px;
}
 
table {
        margin: auto;
        border-collapse: collapse;
        margin-top: 50px;
}
 
tr th {
        background-color: blue;
        color: white;
        text-align: center;
        padding: 5px 5px;
}
 
table tbody tr.celda:nth-child(odd) {
  background-color: #E0ECF8;
}
 
table tbody tr.celda:nth-child(even) {
  background-color: #B5C6D6;
}
 
table tbody tr.celda td {
        text-align: center;
        padding: 5px 5px;
}
 
table tbody tr.celda:hover {
        background-color: #D0F5A9;
}
 
div.title { 
        position: relative;
        z-index: 0;
}
                
div.title:hover { 
        background-color: transparent;
        z-index: 1;
}
 
div.title span { 
        border: 1px solid #f60;
        padding: 5px;
        position: absolute;
        text-decoration: none;
        background-color: #F5DEB3;
        color: #3E1F00;
        text-align: center;
        visibility: hidden;
        font-size: 14px;
        line-height: 15px;
}
 
div.title:hover span { 
        visibility: visible;
        top: 24px;
        left: 25px;
}

 

 Si nos fijamos en nuestro condigo tenemos etiquetas <tr></tr> declaradas con una clase llamada celda esto lo hacemos para poder resaltar toda la fila al momento de posicionar el cursor.

 

Ademas dentro de las etiquetas <td></td> tenemos unos div llamados title y unas etiquetas <span></span> que contienen el mismo texto que la celda de nuestra tabla, estas etiquetas seran las que se mostraran al posicionar el cursor sobre ellas.

 

Tags: