Bon, alors j'ai ce problème et je n'arrive pas à le comprendre. J'ai examiné de nombreuses solutions, mais aucune n'a fonctionné. Je travaille avec un logiciel doté d'un navigateur intégré - pour autant que je sache, son IE7.Problèmes d'info-bulles du navigateur IE7 intégrés
Je lie le navigateur intégré à un fichier HTML. Dans le fichier, je génère du HTML via JavaScript en fonction des valeurs transmises au contrôle du navigateur via le logiciel.
Le HTML que je construis est un graphique.
J'ai un conteneur div qui contient tout. Dans celui-ci j'ai un div flottant à gauche qui détient l'échelle pour le graphique. J'ai alors un div appelé graphique qui va afficher les données. Cette div est x-scrollable et a quitté la marge de sorte qu'elle ne chevauche pas la div divisée. Via JavaScript Je compile du code HTML, puis je place le innerHTML de la div graphique dans le nouveau code.
Le code que je crée se compose d'une colonne div. Dans la colonne div, 6 autres divs sont positionnés en absolu et reçoivent un sommet pour les montrer alignés verticalement avec l'échelle et basés sur les valeurs transmises au contrôle.
Le nombre de colonnes dépend du nombre de valeurs envoyées et changera. Tout cela fonctionne très bien et les divs positionnés apparaissent dans la colonne où je les veux. Le problème est que je veux que chaque div positionné ait une info-bulle qui affiche la valeur réelle. Dans le contrôle du navigateur, je dois travailler avec, ces infobulles apparaissent toujours derrière les divs positionnés dans la colonne suivante et j'ai besoin qu'ils apparaissent sur le dessus de tout.
Dans l'exemple ci-dessous, l'info-bulle apparaît au-dessus des données dans les colonnes de droite. Toutefois, dans le navigateur IE7 intégré, les données figurant dans les colonnes à droite apparaissent au-dessus de l'info-bulle.
<style>
.container
{
width: 800px;
height: 600px;
background-color: #dfd;
overflow-x: scroll;
}
.scale
{
width: 100px;
height: 520px;
background-color: #fdd;
float: left;
}
.graph
{
width: 1000px;
height: 520px;
background-color: #ddf;
}
.column
{
width: 20px;
height: 520px;
float: left;
background-color: #fdf;
}
.value1
{
position: absolute;
width: 24px;
}
.value2
{
position: absolute;
width: 24px;
}
.value3
{
position: absolute;
width: 24px;
}
.tooltip span
{
display: none;
width: 100px;
background-color: #fff;
border: 1px solid #000;
position: relative;
z-index: 1;
}
.tooltip:hover span
{
display: inline-block;
position: absolute;
left: 24px;
z-index: 2;
}
</style>
<body>
<div class="scale">Blah blah</div>
<div class="container">
<div class="graph">
<div class="column">
<div class="value1" style="top: 100px;"><a class="tooltip" href="#">1a<span>tooltip data</span></a></div>
<div class="value2" style="top: 150px;">2a</div>
<div class="value3" style="top: 200px;">3a</div>
</div>
<div class="column">
<div class="value1" style="top: 130px;">1b</div>
<div class="value2" style="top: 160px;">2b</div>
<div class="value3" style="top: 180px;">3b</div>
</div>
<div class="column">
<div class="value1" style="top: 90px;">1c</div>
<div class="value2" style="top: 110px;">2c</div>
<div class="value3" style="top: 140px;">3c</div>
</div>
</div>
</div>
</body>
jsfiddle exemple simple.
J'ai essayé de changer de position: absolue et: relative sur divers éléments. J'ai essayé de définir des z-index de divers éléments et le résultat est toujours le même. Les info-bulles apparaissent derrière les valeurs positionnées dans les colonnes à droite.