Eli tarkoitus on saada normaalille tekstistä muodostetulle linkille title.
Esim.
<a ref="testisivu.php" title="rivi 1 (rivinvaihto) rivi 2 (rivinvaihto) rivi 3">Linkki</a>
Minua siis kiinnostaa miten tuo rivinvaihto tuossa tehdään? Linkit kun muodostetaan dynaamisesti tietokannan sisällön perusteella. Ja sitten olen jossain nähnyt, että tuohon title boxiin on jopa saatu sisällytettyä oma linkkinsä. Onko se sitten JS koodausta vai ei, niin ei mitään muistikuvaa. Senkin toteutus kiinnostaisi.
Luulisin, että nuo isommat tooltipit mitä silloin tällöin näkee, ovat DHTML:llä toteutettuja, eikä niillä ole mitään tekemistä normaalin titlen kanssa. Jos haluat kuitenkin kokeilla tuota rivinvaihtoa, niin pistä sinne \r\n siihen mihin haluat rivinvaihdon. En tiedä tosin toimiiko, enkä saa nyt oikein itse testattua.
Wizard kirjoitti:
Minua siis kiinnostaa miten tuo rivinvaihto tuossa tehdään?
Title-tooltippeihin ei saa rivinvaihtoja, kuten ei mitään muutakaan muotoilua. JS-säätämiseksi menee.
Hieman säätämällä saa:
<?php $titleboxi = "rivi1 rivi2 rivi3"; print "<a ref=\"testi.php\" title=\"$titleboxi\">Linkki</a>"; ?>
Kun vain vielä tietäisi miten tuon saisi koodituksella aikaan ilman, että pitäisi koodissa tehdä tuota rivinvaihtoa. :S
Rivinvaihdon sijasta voit käyttää \n-merkintää. Tuossa toteutuksessa on kuitenkin eräs ongelma: se toimii ainoastaan Internet Explorerilla.
Antti Laaksonen kirjoitti:
Rivinvaihdon sijasta voit käyttää \n-merkintää. Tuossa toteutuksessa on kuitenkin eräs ongelma: se toimii ainoastaan Internet Explorerilla.
Tuleeko mieleen mitään mikä mahdollisesti toimisi kaikilla vaihtoehdoilla (lue:selaimilla)? JS on mahdollista käyttää, koska sen käyttö on pakotettua muutenkin. Eli jos joku tietää valmiin scriptin jossain, niin olisin enemmän kuin kiitollinen.
Miksi lähteä merta edemmäs kalaan, onnistuuhan tuo pelkällä CSS:lläkin.
<html>
<head>
<title>Tooltip</title>
<style type='text/css'>
<!--
a.tooltip {
position:relative;
z-index: 10;
}
a.tooltip:hover {
z-index: 11;
text-decoration: none;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span {
display: block;
position: absolute;
top: 20px;
left: 20px;
border: solid 1px #ccc;
background: #fafafa;
color: #444;
padding: 3px;
}
-->
</style>
</head>
<body>
<p>Lorem ipsum dolor sit <a href='#' class='tooltip'>amet<span>No voihan lerssi,<br />sanoi isäntä,<br />kun korva puhkesi.</span></a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>Jaaha, pitäneepä kokeilla.
Aika mielenkiintoinen kyllä tuo loppuosa tuosta vinkistä... =)
Aihe on jo aika vanha, joten et voi enää vastata siihen.