Witam.
Najeżdżam kursorem na obrazek i prawidłowo wyskakuje tooltip (chmurka) z podanymi informacjami. Niestety, gdy najadę kursorem na obrazek znajdujący sie akurat na górze po prawej, to tooltip częściowo chowa sie, nawet gdy nadam mu z-index: 9999.
<body>
<div class="header-nav-container">
</div>
<div class="header-container">
<div class="header-left">
</div>
<div class="header-right">
</div>
<div class="header">
<div class="text">
<span>Sport</span>
</div>
</div>
</div>
<div class="content">
<ul>
<li style="position: absolute; left: 616px; top: 10px">
<a href="sport/football.php" class="Football">
<img src="obrazki/sport/football.jpg" />
</a>
<div class="tooltip">
<p class="data-tooltip1" style="color: yellow">Info 1</p>
<p class="data-tooltip3" style="color: red">Info 2:<span>Info 2</span></p>
<p class="data-tooltip3" style="color: red">Info 3:<span>Info 3</span></p>
<p class="data-tooltip4" style="color: red">Info 4:<span>Info 4</span></p>
</div>
</li>
</ul>
</div>
</body>
*
{
box-sizing: border-box;
}
body
{
background-color: #363636;
background-attachment: fixed;
font-family: Verdana;
margin: 0;
position: relative;
height: 222vh;
z-index: -100;
}
.header-nav-container
{
background-color: #C0C0C0;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 90px;
z-index: 3;
}
.header-container
{
position: fixed;
top: 90px;
width: 100%;
z-index: 2;
}
.header-left
{
float: left;
width: 22.6%;
height: 43px;
background-color: #808080;
}
.header-right
{
float: right;
width: 22.6%;
height: 43px;
background-color: #808080;
}
.header
{
border-left: 1px solid #A29672;
border-top: 1px solid #A29672;
border-right: 1px solid #A29672;
width: 54.8%;
line-height: 41px;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: rgba(0,0,0,0.75);
}
.header .text span
{
font-size: 24px;
font-family: Ek Mukta;
color: #76DAFF;
text-decoration: none;
}
.content
{
background-color: #3D4958;
border-left: 1px solid #A29672;
border-right: 1px solid #A29672;
border-bottom: 1px solid #A29672;
width: 54.8%;
height: 200vh;
position: relative;
margin-left: auto;
margin-top: 160px;
margin-right: auto;
z-index: 1;
}
ul li
{
display: block;
}
ul li:hover > .tooltip
{
display: block;
}
span
{
margin-left: 5px;
color: white;
font-family: Oxygen;
}
.Football
{
outline: none;
}
.Football img
{
border: 2px solid #000000;
width: 100px;
height: 143px;
}
.Football img:hover
{
border: 2px solid #32CD32;
cursor: pointer;
}
.tooltip
{
display: none;
width: 304px;
height: 119px;
border-radius: 5px;
background-color: #000000;
position: absolute;
z-index: 9999;
top: 12px;
left: 108px;
}
.data-tooltip1
{
margin-left: 8px;
margin-top: 12px;
font-size: 12px;
font-weight: bold;
}
.data-tooltip2
{
margin-left: 8px;
font-size: 11px;
}
.data-tooltip3
{
margin-left: 8px;
font-size: 11px;
}
.data-tooltip4
{
margin-left: 8px;
font-size: 11px;
}
Gdy najedzie sie kursorem na obrazek znajdujący sie na górze po prawej, to widać, że tooltip nie jest wyświetlany w całości. Widać to wtedy, gdy obrazek przesunie sie do góry i następnie najedzie kursorem na ten obrazek - wtedy górna część tooltipa chowa się.
To nie pomaga, a powinno:
.tooltip
{
z-index: 9999;
}
Teoretycznie ten tooltip powinien działać prawidłowo, gdy nadam mu z-index: 4 albo wyższy, ale nawet wartość 9999 nie przynosi zamierzonego rezultatu.
Co muszę zrobić, aby ten tooltip był wyświetlany w całości przy tym obrazku?
Będę bardzo wdzięczny za skuteczną pomoc.
