5 svar · 483 visningar · startad av Troll
Jag var på jakt efter ett smidigt sätt att fixa egna 'title' på länkar och hittade detta som jag verkligen tycker om. Vill inte blanda in javaScript och eftersom det bara är css så föll det mig i smaken. Problemet är bara att det inte riktigt går att bestämma vart det ska visas, iaf inte som jag vill.
css
<style type="text/css">
body {font: normal 14px verdana;}
a:hover {background-color: #333;color:#fff;}
p.link a:hover {background-color: #2B2E21;;color:#fff;}
p.link a:link span{display: none;}
p.link a:visited span{display: none;}
p.link a:hover span {
position: absolute;
margin:15px 0px 0px 20px;
background-color: beige;
width:200px;
padding: 2px 10px 2px 10px;
border: 1px solid #C0C0C0;
font: normal 10px verdana;
color: #000;
text-align:left;
display: block;}
</style>
kod
<p class="link" align="right"><a href="http://www.google.com/">TEST<span>Tooltip: Blah bla bla</span></a></p>
Detta funkar ju utmärkt om länkarna ligger till höger om sidan så att säga, eftersom texten jag tänkt använda detta på kommer att löpa på rätt stora ytor så satte jag 'position: relative;' istället. Då hamnar den ju iaf vid länken men påverkar resten av innehållet. Den lägger sig alltså inte över. Har testat att fippla med z-index men går det inte att lösa på ett bättre sätt?
Är det någon annan som har annan/bättre kod att använda sig av eller kan komma med tips?
Hej
Orkade inte riktigt gå igenom din kod, men jag skrev lite själv.
Jag har testat tre olika sätt här.
Första länken är en vanlig länk.
Andra länken är mitt svar på din fråga. Den buggar i IE av någon anledning.
Lite roligt är det faktiskt, att jag har hittat en bug som får IE att krasha nu när jag har experimenterat. Men det tänker jag inte posta här - ska försöka få lite publicitet till min blog först ;).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Henriks hjälpförslag.</title>
<style media="screen" title="Henriks röra" type="text/css">
body, html {
}
body {
font: 86.5%/1.5em arial;
width: 50em;
}
a {
text-decoration: none;
}
/* So here is the hover-tooltip try */
a span {
font-size: 0.8em;
display: none;
}
a.hoverlink:hover {
position: relative;
}
a.hoverlink:hover span {
position: absolute;
bottom:20px; left: 0px;
display: block;
white-space: nowrap;
color: #222;
background-color:white;
border: 1px solid #213227;
padding: 5px 10px;
-moz-border-radius: 5px;
}
</style>
</head>
<body><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porta. Integer facilisis leo id tellus. Vestibulum molestie, lacus non elementum condimentum, sem lorem blandit arcu, ut elementum orci sem eget nunc. Donec lobortis nibh vel neque. Donec ultrices. Fusce non enim at arcu dignissim scelerisque. Duis nunc nisl, aliquet eget, viverra sed, volutpat in, sapien. Donec pellentesque eleifend nisl. Duis purus erat, dignissim et, mollis vitae, ultricies nec, odio. <a href="http://www.haf.se" title="Här är min hemsida">En normal länk </a> In in quam eget neque elementum semper. Etiam enim. Aliquam vulputate rhoncus neque. <a href="http://www.haf.se/cv" title="En 'onormal' länk" class="hoverlink"><span>Här lägger vi vår popup.</span>Morbi consectetuer</a> tortor molestie tortor. Curabitur nec lacus. Suspendisse faucibus, leo vitae adipiscing ultricies, mi nisi interdum elit<span></span>, eget sollicitudin dui leo vitae turpis. Nunc viverra mattis ligula. Nunc non sem nec tellus porttitor facilisis. </p>
</body>
</html>
Jag tycker att det är lite extra värt att fundera på hur skärmläsare utan CSS-stöd hanterar HTML:en ni båda använder. Gissningsvis så kommer hela tooltip-texten att läsas upp för användaren som om det var en enda stor länk. Rätt drygt att lyssna på kan jag tänka. En lösning på detta skulle kunna vara att lägga popupen efter länken i koden och använda javascript för att placera den rätt och poppa upp den vid mouseover. Bara några idéer.
Hej Emil,
roligt att du har kommit hit :). Har varit här ett tag. Det är Henke...
I alla fall så håller jag inte riktigt med dig eftersom frågeställaren frågade specifikt:
Vill inte blanda in javaScript och eftersom det bara är css så föll det mig i smaken.
Jag håller med dig om att jag hade använt javascript, och då hade jag rekommenderat:
http://www.dustindiaz.com/sweet-titles-finalized
istället. Men nu snackar vi ju bara CSS, eller hur?
Halloj Henke :)
Jag ville bara påpeka nackdelarna med att ha väldigt långa länktexten för de som inte parsar CSS. Var person får sedan välja metod efter eget tycke :)