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

Pratbubblor vid text (html/css)

1
Skriv svar
Permalänk
Medlem
●

Pratbubblor vid text (html/css)

Någon som försökt sig på att göra pratbubblor som dyker upp i ett textflöde på en webbsida? När man för markören över ett visst ord så dyker en liten beskrivning upp där spannet för ordet är, precis som title fungerar för länkar. Hur gör man med själva positioneringen av innehållet som ska visas?

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
<!DOCTYPE html>
<title>testdoc</title>
<meta charset="utf-8">
<style>
.bubble {
	position: relative;
}
.bubble span {
	background: #def;
	border: 1px solid #333;
	color: #333;
	display: none;
	left: 0;
	padding: 5px;
	position: absolute;
	top: 1.2em;
	width: 8em;
}
.bubble:hover span {
	display: block;
}
</style>
<p>Detta är ett test! Musa över <a class="bubble">den här<span>
Vad käckt, en liten ruta poppar upp!</span></a> texten och se vad 
som händer..</p>

edit: ändrad för IE7

edit igen: ändrade första span-elementet till dfn, mest "bara för att".. Vill man låta bli att krångla kan man lägga till title="whatever" på sin span/dfn-tag och skippa att ha ett inre element och position: absolute med allt vad det innebär.

edit 3: title är alltså ett standardattribut och går att använda på alla element.

Senast redigerat
Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack Teknocide! Snyggt exempel, som vanligt.
För att krångla till det hela lite, finns det någon lösning som även skulle fungera för IE6? Eller får man ta vägen förbi javascript då?

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Testa att använda ett a-element istället för dfn.

edit: ändrade i föregående exempel. Nackdelen är att <a> inte har samma semantiska innebörd om sådant anses viktigt.

Senast redigerat
Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Semantiken är inte jätteviktig i det här fallet. Det händer tyvärr inte mycket i IE6, men jag förstår inte varför, display:hidden och display:block bör ju fungera tycker man.

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Testa med left: -99999em och left: 0 istället

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag gjorde något väldigt vettigt liknande detta för ett tag sedan: Definition tooltips with jQuery. Använder JS, men grundar sig på mycket snyggare HTML som degraderar fint. Bättre lösning, IMHO.

Edit: Läste inte; du vill ha tooltips, använd title-attributet.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack för förslag, ah det är nog jag som uttryckte mig otydligt i första posten - om inte title går att styla grafiskt via css? Är ute efter att göra en ruta som jag kan styra hur den ser ut som dyker upp när man för musen över vissa ord i texten, precis som du gjort med Definition tooltips. Är den kompatibel med IE6?

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av save
Tack för förslag, ah det är nog jag som uttryckte mig otydligt i första posten - om inte title går att styla grafiskt via css? Är ute efter att göra en ruta som jag kan styra hur den ser ut som dyker upp när man för musen över vissa ord i texten, precis som du gjort med Definition tooltips. Är den kompatibel med IE6?

Har inte testat den i IE6 men den bör göra det då alla komponenter ska fungera i IE6.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av You
Har inte testat den i IE6 men den bör göra det då alla komponenter ska fungera i IE6.

Testade precis exemplet du lagt upp och det fungerar på det första "TNT", men underligt nog ingen annanstans.

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av save
Testade precis exemplet du lagt upp och det fungerar på det första "TNT", men underligt nog ingen annanstans.

Är det bara popupen som inte fungerar på de andra orden eller markeras de inte ens?

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av You
Är det bara popupen som inte fungerar på de andra orden eller markeras de inte ens?

De varken markeras eller får en popup. Önskar att vi snart slipper ie6..

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av save
De varken markeras eller får en popup. Önskar att vi snart slipper ie6..

Vilken kund är det som vill ha IE6-stöd? Frågar för att jag till och med har lyckats övertala Tele2 Sverige om att släppa IE6-stödet i nästkommande site. De har ca 11 % IE6-beökare idag men det talet sjunker snabbt. Så vem kunden än är måste de vara i stort behov av tillgänglighet... hoppas du tar bra extra betalt för att koda för IE6, timmarna försvinner!

Visa signatur

På SoundCloud | Fästmöns galleri

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av azoapes
Vilken kund är det som vill ha IE6-stöd? Frågar för att jag till och med har lyckats övertala Tele2 Sverige om att släppa IE6-stödet i nästkommande site. De har ca 11 % IE6-beökare idag men det talet sjunker snabbt. Så vem kunden än är måste de vara i stort behov av tillgänglighet... hoppas du tar bra extra betalt för att koda för IE6, timmarna försvinner!

I det här fallet är det Finansförbundet. Så länge det finns en fallback så borde det fungera någorlunda, i värsta fall får man kanske lösa ett sånt här problem med title för IE6. Intressant att det bara ligger på 11%, verkar som w3 ligger på samma siffra, men jag tror att 2010 ut så fortsätter jag IE6-ifieringen. Timmarna tickar verkligen till debug vilket är ett frustrerande måste antar jag, dock så är det ett schysst avtal.

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

Fick till en lösning tack vare Teknocides början. Kör ni dock på 960gs-metoden och vill få det IE6-kompatibelt så får ni skriva om så 960gs mäter i ems istället för pixlar i text och reset.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6 compatible tooltip</title>
<style type="text/css">
.tooltip {
	position:relative;
	margin-left:0.2em;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000;
	color: #000;
	text-decoration: none;
}
.tooltip:hover {
	font-size:100%;
	color: #000;
	text-decoration: none;
}
.tooltip span {
	display:none
}
.tooltip:hover span {
	display:block;
	position:absolute;
	top:1.5em;
	left:10px;
	background-color:#6CC;
	color:#FFF;
	border:1px solid #666;
	padding:2px 3px;
	width:325px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	z-index:999;
	cursor:help;
}
</style>
</head>

<body>
Text text text <a href="#" class="tooltip">and something interesting<span>This is a tooltiptext that describes the word you point at.</span></a> and some more text text text.
</body>
</html>
Senast redigerat
Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag tänkte på en sak.. Det kan vara värt att lägga parenteser runt innehållet i span-taggen utifall att CSS skulle vara avstängt. Då ser det ut som just en paranteskommentar och det borde inte störa överdrivet mycket i en bubbla heller.

Senast redigerat
Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara