Tooltip po kliknięciu w ikonkę z możliwością zamknięcia

0

Witam

Czy do zrobienia tooltipa z możliwością zamknięcia wystarczy sam html + css czy jeszcze będzie tutaj potrzebny javascript? Chodzi mi, żeby niezależnie od szerokości ekranu tooltip pokazywał się w określonym miejscu po kliknięciu w ikonkę, żeby zawsze wyświetlał się poprawnie.

Np. jak tutaj, zależy mi żeby nie było bootstrapa itd. tylko chodzi mi czy jest możliwość zrobienia customowo tooltipa bez dodatkowych bibliotek
tooltip.png

2

html + css
W zasadzie się da:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
#dymacz {
  position:relative;
  background-color:#58B957;
  color:white;
}

#dymek {
  position:absolute;
  display:none;
  top:-30px;
  left:10px;
  border:1px solid red;
  color:black;
  background-color:#eeeeee;
}

#dymacz:focus > #dymek {
  display:block;
}
</style>
</head>
<body>

<br><br><br>
<div id="dymacz" tabindex="0">dymacz (kliknij mnie)
  <div id="dymek">dymek</div>
</div>

</body>
</html>
1
LynxBings napisał(a):

Witam

zależy mi żeby nie było bootstrapa itd.

Oczekiwanie (również z innych względów) jest całkiem ok.
Wielu (w tym ja) uważa bootstrapa za antywzorzec CSS.
Odwrotnie niż miało być, zamiast nazywać obiekty w kategoriach semantycznych ("jaką rolę spełniają": tytuł artykułu, dymek, suma dokumentu) opisuje je w kategoriach wizualnych. Więc Ci ludzie uważają botstrapa za regres.

Więc może poobracaj się w krainach, gdzie mówienie językiem bootstrap nie jest obowiązkowe

Nie jestem ani full time, ani nawet 20% time webowcem, ale wersja @Freja Draco mi się widzi
@LynxBings oswój się z takim użyciem.

1 użytkowników online, w tym zalogowanych: 0, gości: 1