SweClockers drop!
Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Div-popup med tooltip? Huvudbry :/

1
Skriv svar
Permalänk
Musikälskare ★
●

Div-popup med tooltip? Huvudbry :/

Hallå!

Jag har en lista med olika val i text:

1. asd1
2. asd2
3. asd3

Jag vill att när man för musen över tex 1. asd1 så ska en popup-div hamna precis ovanför där man kan fylla i alternativ (show/hide)

Problemet är att popup-diven stannar på samma ställe och följer inte alternativet i listan, antar att man måste ge en position med nån form av tooltip för att positionen ska ändras till det specifika valet i listan

Skrev ihop nått snabbt, fungerar sådär men ni kanske förstår bättre

http://jsfiddle.net/LnAk5/3/

Visa signatur

❀ Monitor: ASUS Swift 27" @ 1440p/165Hz ❀ CPU: Ryzen 7700X ❀ Cooling: Corsair H170i ELITE 420mm ❀ GPU: MSI 3080 Ti SUPRIM X ❀ Memory: Corsair 32GB 6000Mhz DDR5 Dominator ❀ Motherboard: ASUS Crosshair X670E Hero ❀ M.2: Samsung 980 Pro ❀ PSU: Corsair HX1200 ❀ Chassi: Corsair 7000X

💾 Min retrodator
📷 Mina fotografier
🎧 Vad lyssnar du på just nu?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av flashen:

Hallå!

Jag har en lista med olika val i text:

1. asd1
2. asd2
3. asd3
....

Gå till inlägget

Om jag förstår rätt så vill du helt enkelt att en popup ska komma när du har musen över ett val i listan? Det kan du göra helt i CSS. Kolla det jag slängde ihop här så förstår du kanske hur det fungerar http://jsfiddle.net/Lackevafan/W6tVe/ . Kan förklara lite mer hur det fungerar om du inte förstår

Redigera
Citera flera Citera
Permalänk
Musikälskare ★
●
Skrivet av Lackevafan:

Om jag förstår rätt så vill du helt enkelt att en popup ska komma när du har musen över ett val i listan? Det kan du göra helt i CSS. Kolla det jag slängde ihop här så förstår du kanske hur det fungerar http://jsfiddle.net/Lackevafan/W6tVe/ . Kan förklara lite mer hur det fungerar om du inte förstår

Gå till inlägget

Coolt ska kolla på det ikväll efter jobb

EDIT: Fungerar perfekt, ibland är de enkla lösningarna med CSS bäst stirrade mig helt blind på JQ-lösning

Senast redigerat
Visa signatur

❀ Monitor: ASUS Swift 27" @ 1440p/165Hz ❀ CPU: Ryzen 7700X ❀ Cooling: Corsair H170i ELITE 420mm ❀ GPU: MSI 3080 Ti SUPRIM X ❀ Memory: Corsair 32GB 6000Mhz DDR5 Dominator ❀ Motherboard: ASUS Crosshair X670E Hero ❀ M.2: Samsung 980 Pro ❀ PSU: Corsair HX1200 ❀ Chassi: Corsair 7000X

💾 Min retrodator
📷 Mina fotografier
🎧 Vad lyssnar du på just nu?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Lackevafan:

Om jag förstår rätt så vill du helt enkelt att en popup ska komma när du har musen över ett val i listan? Det kan du göra helt i CSS. Kolla det jag slängde ihop här så förstår du kanske hur det fungerar http://jsfiddle.net/Lackevafan/W6tVe/ . Kan förklara lite mer hur det fungerar om du inte förstår

Gå till inlägget

Såhär kan man också göra. Enligt mig bättre: http://jsfiddle.net/W6tVe/22/

Redigera
Citera flera Citera
Permalänk
Musikälskare ★
●
Skrivet av kismo:

Såhär kan man också göra. Enligt mig bättre: http://jsfiddle.net/W6tVe/22/

Gå till inlägget

Intressant

Vad gör "content: attr(data-popup);" för något?

Inte sett den taggen innan

Visa signatur

❀ Monitor: ASUS Swift 27" @ 1440p/165Hz ❀ CPU: Ryzen 7700X ❀ Cooling: Corsair H170i ELITE 420mm ❀ GPU: MSI 3080 Ti SUPRIM X ❀ Memory: Corsair 32GB 6000Mhz DDR5 Dominator ❀ Motherboard: ASUS Crosshair X670E Hero ❀ M.2: Samsung 980 Pro ❀ PSU: Corsair HX1200 ❀ Chassi: Corsair 7000X

💾 Min retrodator
📷 Mina fotografier
🎧 Vad lyssnar du på just nu?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av flashen:

Intressant

Vad gör "content: attr(data-popup);" för något?

Inte sett den taggen innan

Gå till inlägget

Det jag gör är att jag deklarerar ett så kallat pseudo-element i CSS-koden med :after. Med det kan du placera ut element som inte syns i HTML-koden före (:before) eller efter (:after) elementet. "content"-egenskapen bestämmer vad för innehåll som ska finnas innan eller efter elementet.

Du kan skriva t.ex. content: 'HEJSAN'; men man kan också använda ett attribut från elementet, vilket man gör med attr(*attributet här*); och i det här fallet är det data-popup som jag vill använda.

Redigera
Citera flera Citera
1
Skriv svar