Skocz do zawartości
PL
Szukaj na Pecetowiczu
  • Utwórz konto

Dymek / tooltip po najechaniu na grupę / rangę w legendzie grup.


Rekomendowane odpowiedzi

Poszukuje opisu rang w css po na jechaniu na range 

image

Odnośnik do komentarza
Udostępnij na innych stronach

Hint.css - A pure CSS tooltip library for your lovely websites

https://kushagragour.in/lab/hint/
Odnośnik do komentarza
Udostępnij na innych stronach

mam kod  rangi 

<b>Administracja:</b>   
	<span class="w"> Właściciel Zielsko.eu</span> | 
	<span class="admin">  Administrator</span>|
	<span class="ja"> Junior Administrator</span> | 
	<span class="m"> Moderator</span> | 

CSS

tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

HTML

  <span class="tooltiptext">Tooltip text</span>

to wszystko mam z tej strony https://www.w3schools.com/Css/css_tooltip.asp

Odnośnik do komentarza
Udostępnij na innych stronach

Ewentualnie można pójść najprostszą linią oporu i skorzystać z:

original-title="fajowa ranga dla wlasciciela fajowej sieci"

lub po prostu dodając

title="ta ranga jest mniej fajowa, bo się nie świeci"

do klasy rangi. Dajmy na to, że kod wygląda tak: <span class="wlasciciel"><i class="fa fa-star"></i> Właściciel</span> 

więc dodajemy "title" 

<span class="wlasciciel" title="fajowa ranga dla admina"><i class="fa fa-star"></i> Właściciel</span>

+ zostaje potem ostylowanie tego pola, które wyświetlane jest po najechaniu na nią kursorem.

Aczkolwiek propozycja od Piotrka jest lepszą opcją.

@SzaQu no i teraz odnieś się w kodzie, który podałeś jako pierwszy do tego, co wkleiłeś w global.css.

+ przede wszystkim uzyj całego kodu .css z tej strony.

@SzaQu jak niżej, Bartnik wszystko wytłumaczył krok po kroku.

Dodam tylko, że to:

https://kushagragour.in/lab/hint/hint.min.css

umieszczasz w: style i szablony  szablony  Twój szablon  niezgrupowane szablony  headerinclude.

Bartnik "a" Ci się dodało w linku do demka.

Odnośnik do komentarza
Udostępnij na innych stronach

@Mendelson. nie działa dalej :/ 

Odnośnik do komentarza
Udostępnij na innych stronach

HTML:

<span class="w hint--right" aria-label="Opis rangi..." >Właściciel Zielsko.eu</span>

CSS:

.w {
    text-shadow: 1px 1px 12px red;
    font-weight: bold;
    color: #FF0000;
}

+:

https://kushagragour.in/lab/hint/hint.min.css

Demo:

https://codepen.io/anon/pen/QXNyBa
Odnośnik do komentarza
Udostępnij na innych stronach

Kontynuuj dyskusję

Dołącz do Pecetowicza, aby kontynuować dyskusję w tym wątku.

  • Dodaj nową pozycję...
  • Dodaj nową pozycję...