Discussion :

[popo]

Bonjour,

J'ai trouvé sur le net un exemple d'infobulle que j'ai essayé d'adapter avec mes maigres connaissances en CSS.
J'ai essayé tellement de site que je ne saurais vous dire où je l'ai trouvé.

L'objectif est que l'infobulle apparaissent lors du survol d'une zone précise et qu'elle disparaissent après un court moment.
Cela fonctionne mais, j'ai remarqué qu'un fois qu'elle a disparu, je ne peux plus interagir avec les zones qu'elle a recouvert lorsqu'elle était visible.
Dans ce cas précis, il s'agit du bouton que j'ai mis un peu plus bas dans la page.
Je suis obligé de décaler ma souris plus bas que cette fameuse zone pour pouvoir de nouveau cliquer sur le bouton.

Impératif, l'infobulle doit fonctionner sous IE 11.

Voici le CSS en question :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
/* DEBUT HINT */
 .hint {
    position: relative;
    text-decoration: none;
    background: none; /* Correction d'un bug d'Internet Explorer. */ 
}
 
    .hint samp {
        display: none;
    }
 
    .hint:hover {
       background: none; /* Correction d'un bug d'Internet Explorer. */ 
    }
        .hint:hover samp {
            z-index: 10;
            display: inline;
            position: absolute;
            /*white-space: nowrap; */
            word-break:break-word;
            word-wrap: break-word;
            left: 5px;
            background: white;
            color: #555555; 
            padding: 3px;
            border: 1px solid #555555; 
            font-family: "Segoe UI";
 
            /*Essai animation */
            -webkit-animation: seconds 1.0s forwards;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-delay: 0.5s;
            animation: seconds 1.0s forwards;
            animation-iteration-count: 1;
            animation-delay: 0.5s;
        }
 
    .hint.fix samp {
        width: 280px;
    }
 
    .hint.notimeout:hover samp {
        -webkit-animation: none;
        -webkit-animation-iteration-count: 0;
        -webkit-animation-delay: 0s;
        animation: none;
        animation-iteration-count: 0;
        animation-delay: 0s;
    }
 /* FIN HINT */
 
/* DEBUT TIMER HINT */
@-webkit-keyframes seconds {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
 
    }
}
 
@keyframes seconds {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
 
    }
}
/* FIN TIMER HINT */

Et le code HTML qui l'utilise :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="odata-query-container">
            <div class="odata-query-item">
                <div class="odata-item-left hint fix">
                    <div>
                        31/10/2018<div class="separator"></div>
                        Lorem ipsum dolor (par clé)
                    </div>
                    <samp>https://localhost:44367/api/Article?$filter=(PrixVenteTTC ge 1.2 and (TypeArticle eq 'MAR' or TypeArticle eq 'PRE'))</samp>
                </div>
                <div class="odata-item-right">
                    <svg xmlns="http://www.w3.org/2000/svg" class="img-svg">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-refresh" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="img-svg">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rename" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="img-svg">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-trashbin" />
                    </svg>
                </div>
            </div>
        </div>
 
        <button class="button blue" id="new">Nouvelle requête</button>

Le CSS suivant correspond à ma mise en page et au look du bouton
Je ne pense pas qu'il ai une influence sur l'infobulle mais dans le doute, la voici.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
/* DEBUT ODATA QUERY CONTAINER */
.odata-query-container
{
    margin-top:5px;
    margin-bottom:10px;
}
/* FIN ODATA QUERY CONTAINER */
 
/* DEBUT ODATA QUERY ITEM */
.odata-item-left {
    margin-top: 5px;
    float: left;
    width: 70%;
    height:100%;
}
 
.odata-item-right {
    margin-top: 5px;
    float: right;
    height:100%;
}
 
.odata-query-item {
    padding-bottom:5px;
    border-bottom: 0.5px solid #AAAAAA !important;
    display : inline-block;
    width: 100%;
}
/* FIN ODATA QUERY ITEM */
 
 
.button {
    border: none;
    display: inline-block;
    padding: 10px 25px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
 
.blue {
    color: white !important;
    background-color: #0046FE !important;
    border: 0.5px solid #0046FE !important;
}
 
.blue:hover {
    color: #0046FE !important;
    background-color: #FFFFFF !important;
}
 
.blue:disabled
{
    opacity : 0.25;
}
 
.blue:hover:disabled {
    border: 0.5px solid #555555 !important;
    background-color: #555555 !important;
    color: white !important;
    opacity:0.25;
}
}

[popo]

Cette page m'a permis de résoudre mon problème.
https://developer.mozilla.org/fr/doc...S_anim%C3%A9es

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@-webkit-keyframes seconds {
    0% {
        visibility:visible;
    }
 
    100% {
        visibility:hidden;
    }
}
 
@keyframes seconds {
    0% {
        visibility:visible;
    }
 
    100% {
        visibility:hidden;
    }
}