Discussion :

[laurentSc]

Bonjour,

je souhaite afficher une infobulle au survol d'un input de formulaire. Pour faire cela, j'utilise le jQuery-iu : https://jqueryui.com/tooltip/#custom-style. Mon souci, c'est que l'infobulle s'affiche en arrière-plan du reste des éléments alors que je voudrais qu'elle s'affiche au premier plan. Même s'il y a beaucoup de CSS je poste ici car c'est du jQuery :

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
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!-- partie dans le head  -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 
  <link rel="stylesheet" href="/resources/demos/style.css">
 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
  <script>
 
  $( function() {
 
    $( document ).tooltip({
 
      position: {
 
        my: "center bottom-20",
 
        at: "center top",
 
        using: function( position, feedback ) {
 
          $( this ).css( position );
 
          $( "<div>" )
 
            .addClass( "arrow" )
 
            .addClass( feedback.vertical )
 
            .addClass( feedback.horizontal )
 
            .appendTo( this );
 
        }
 
      }
 
    });
 
  } );
 
  </script>
 
  <style>
 
  .ui-tooltip, .arrow:after {
 
    background: black;
 
    border: 2px solid white;
 
  }
 
  .ui-tooltip {
 
    padding: 10px 20px;
 
    color: white;
 
    border-radius: 20px;
 
    font: bold 14px "Helvetica Neue", Sans-Serif;
 
    text-transform: uppercase;
 
    box-shadow: 0 0 7px black;
 
  }
 
  .arrow {
 
    width: 70px;
 
    height: 16px;
 
    overflow: hidden;
 
    position: absolute;
    z-index:9999;
 
    left: 50%;
 
    margin-left: -35px;
 
    bottom: -16px;
 
  }
 
  .arrow.top {
 
    top: -16px;
 
    bottom: auto;
 
  }
 
  .arrow.left {
 
    left: 20%;
 
  }
 
  .arrow:after {
 
    content: "";
 
    position: absolute;
 
    left: 20px;
 
    top: -20px;
 
    width: 25px;
 
    height: 25px;
 
    box-shadow: 6px 5px 9px -9px black;
 
    -webkit-transform: rotate(45deg);
 
    -ms-transform: rotate(45deg);
 
    transform: rotate(45deg);
 
  }
 
  .arrow.top:after {
 
    bottom: -20px;
 
    top: auto;
 
  }
 
  </style>
 
<!-- partue dans le body -->
<input type="text" size="50" title="<?php echo $str[350]?>" id="datepickeros" name="datepickeros" value="<?php echo $installdate;?>" >

L'infobulle affichée est la chaîne de caractère de l'attribut title ligne 140 mais elle ne s'affiche pas au premier plan malgré le z-index rajouté ligne 81. Donc, comment faut-il faire ?

[Toufik83]

bonjour,
a-tu essayé :

Code :

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

z-index:9999 !important;

[laurentSc]

Je met un certain temps à répondre ! Ne comprenant pas trop le code que j'ai rajouté, j'ai essayé de rajouter cette ligne à plusieurs endroits, mais rien y fait

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
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!-- part for modifyData.php-->	
 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 
  <link rel="stylesheet" href="/resources/demos/style.css">
 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
  <script>
 
  $( function() {
 
    $( document ).tooltip({
 
      position: {
 
        my: "center bottom-20",
 
        at: "center top",
 
        using: function( position, feedback ) {
 
          $( this ).css( position );
 
          $( "<div>" )
 
            .addClass( "arrow" )
 
            .addClass( feedback.vertical )
 
            .addClass( feedback.horizontal )
 
            .appendTo( this );
 
        }
 
      }
 
    });
 
  } );
 
  </script>
 
  <style>
 
  .ui-tooltip, .arrow:after {
 
    background: black;
 
    border: 2px solid white;
 
 
  }
 
  .ui-tooltip {
 
    padding: 10px 20px;
 
    color: white;
 
    border-radius: 20px;
 
    font: bold 14px "Helvetica Neue", Sans-Serif;
 
    text-transform: uppercase;
 
    box-shadow: 0 0 7px black;
        
    z-index:9999 !important;
  }
 
  .arrow {
 
    width: 70px;
 
    height: 16px;
 
    z-index:9999 !important;
    overflow: hidden;
 
    position: absolute;
        /**/
 
    left: 17%;
 
    margin-left: +40px;
 
    bottom: +0px;
 
  }
 
  .arrow.top {
 
    top: -0px;
 
    bottom: auto;
 
  }
 
  .arrow.left {
 
    left: 20%;
 
  }
 
  .arrow:after {
 
    content: "";
 
    position: absolute;
 
    left: 40px;
 
    top: -20px;
 
    width: 25px;
 
    height: 25px;
 
    box-shadow: 6px 5px 9px -9px black;
 
    -webkit-transform: rotate(45deg);
 
    -ms-transform: rotate(45deg);
 
    transform: rotate(45deg);
 
  }
 
  .arrow.top:after {
 
    bottom: -20px;
 
    top: auto;
 
  }
 
  </style>

[Toufik83]

je ne suis pas sûr que ce problème vient d'une déclaration de "z-index:9999" dans jquery-ui.css, si t'ouvres le fichier et tu cherches .ui-tooltip tu trouvera ça :

Code :

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

1
2
3
4
5
6
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
}

as-tu essayer une valeur + que 9999 ?

[NoSmoking]

Bonjour,
as tu conscience qu'avec cette ligne

Code html :

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

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

tu ne charge le style que si le protocole de ta page est http: ou https: ?