Okno po najechaniu na chpirłącze

Question

Witam, mam problem z Oknem po najechaniu na chiperłącze, chciałbym żeby to okno pojawiało się obok chiperłącza żeby go nie zasłaniało.

<div class="gry">

<div class="gry1">



<a class="tooltip" href="">
   Demonstration
   <span><img src="" width="300">
   </span>
</a>

<br>

<a class="tooltip" href="">
   Demonstration
   <span><img src="" width="300">
   </span>
</a>


</div>





<div class="gry2">


<a class="tooltip" href="">
   Demonstration
   <span><img src="" width="300">
   </span>
</a>

<a class="tooltip" href="">
   Demonstration
   <span><img src="" width="300">
   </span>
</a>

</div>

 

/*Gry.html*/   
 
 	.tooltip
{
  text-decoration:none;
  position:relative;
}
 
 
.tooltip span
{
  display:none;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:black;
  background:white; 
}
 
 
.tooltip span img
{
  float:left;
  margin:0px 8px 8px 0;
}
 
 
.tooltip:hover span
{
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
  width:auto;
  max-width:320px;
  min-height:128px;
  border:1px solid black;
  margin-top:12px;
  margin-left:32px;
  overflow:hidden;
  padding:8px;
}
 
.gry 
{
    display: flex;
    text-align: center;
  }

.gry1, .gry2, .gry3 
{
    width: calc(100% / 3);
}

 

Comments

chpirłącze

chpirłącze

chiperchącza 

hiperłącze 

---

haha

---

Dzisiaj tyle możliwości.. wystarczy w google wpisać i wyskoczy prawidłowa wersja, przeglądarki podkreślają błędnie napisane wyrazy a ludzie i tak kaleczą, do tego ludzie jak takie coś widzą, odbiegają od tematu i wytykają błędy językowe, zamiast skupić się na pomocy danej osobie, więc tracą na tym wszyscy, bo osoba zadająca pytanie, nie zna odpowiedzi i czytający irytują się bo muszą przedzierać się przez masę błędnych napisanych wyrazów. Reasumując.. lepiej poświęcić więcej czasu i napisać poprawnie zwiększając tym samym szansę na uzyskanie odpowiedzi szybciej.

Answer 1

CSS linijka 32 - ustaw span trochę niżej -  top: 10px;