Hogyan készítsek felírást vagy tippet az egérmutató alatt a jquery-re

Egy másik problémáról akarok beszélni, amit a JQuery-nél kellett megoldanom.

Volt egy adott blokk az oldalon (div elem). Az ügyfélnek úgy kellett lennie, hogy amikor az egérmutatót lenyomja erre a mondatra, egy egérmutató jelenik meg az egérmutató mellett. Ez a tipp egy fehér háttér. Fontos volt, hogy amikor az egérkurzor kilépett a kijelölt blokkból, eltűnt a figyelmeztetés.

Végül, úgy néz ki, mint ez:

Kezdjük a HTML tartalmakkal:

Floatingmes - blokkolja a felmerülő tippet

Blokk - A fő blokk, amikor az egérmutatót lenyomva tartja, amely fölött egy eszköztipp jelenik meg.

Ezeknek a blokkoknak a CSS stílusai a következők:

És végül a szkriptek, amelyek a gyors mozgást teszik:

A blokk elemhez egy egér és egy mouseleave esemény jön létre, amelyet akkor hajt végre, ha a kurzor a blokk körül mozog, és amikor az egér elmozdul.

Amikor az egér "elhagyja" a blokkot, a tipp egyszerűen eltűnik.

Amikor az egér kurzor újra belép a blokkba, megmutatjuk a célzást

És megváltoztathatja pozícióját, attól függően, hogy a kurzor hol található az eltolással, 10 picselt.

Az algoritmus erre vonatkozik. Remélem, hogy a példa hasznos volt, és szolgáltatásra vinnék.

Egyébként, ha érdekel, dolgozom a webes elemzési rendszerek beállításával webhelyeken (Yandex Metrics és Google Analytics).

Ha hatékonyabbá szeretné tenni webhelyét, és több pénzt hozna létre, a webes elemzés segíthet ebben.

A "Célok" eszköz segítségével jó eredményeket érhet el ebben az üzletben. Olvass tovább itt.