Wyświetlanie tekstu w ramce po najechaniu na inny obiekt (Tooltip)

pytanie zadane 10 maja 2015 w HTML i CSS przez Krzysiek_34 Mądrala (6,110 p.)

Witam.

Na podstronie umieściłem obrazek i po jego kliknięciu przechodzę do ostatniej podstrony. Po najechaniu kursorem na ten obrazek wyświetla się tekst w ramce. Wszystko działa, ale pod warunkiem, gdy napiszę ciągły tekst. Chciałbym, aby w tej ramce na górze było "info1 - jakiś tytuł", po środku było "info2 - dłuższa informacja" i na dole było "info3 - zakończenie". W rezultacie ma być odstęp (enter) między info1, info2 i info3.

Kod HTML:

<div id="content">
        <style>
            ul li {
                position: absolute;
                display: block;
           }

           ul li:hover:before {
               content: attr(data-tooltip);
               width: 200px;
               height: 100px;
               padding: 15px;
               border-radius: 20px;
               background-color: #000000;
               color: yellow;
               font-size: 12px;
               font-weight: bold;
               position: absolute;
               left: 105%;
           }
       </style>
   <ul>
       <li data-tooltip="TU BĘDZIE WYŚWIETLANY TEKST W RAMCE">
           <a href="kaktus.html"><div class="przyroda"><img src="obrazki/kaktus.jpg" width="125" height="178"></img></div></a>
       </li>
   </ul>
</div>

Kod CSS:

.przyroda
{
   float: left;
   width: 125px;
   height: 178px;
   border: 3px solid #0066FF;
}

W praktyce ma to wyglądać tak:

--------------------------------------------------------------------------------

info1 - TU BĘDZIE WYŚWIETLANY TEKST W RAMCE

info2 - TU BĘDZIE WYŚWIETLANY TEKST W RAMCE

info3 - TU BĘDZIE WYŚWIETLANY TEKST W RAMCE

--------------------------------------------------------------------------------

Czy ktoś z Was wie jak tego dokonać?

1 odpowiedź

odpowiedź 10 maja 2015 przez toaspzoo Dyskutant (8,300 p.)
edycja 10 maja 2015 przez toaspzoo

To powinno Cię zadowolić ;)

http://jsfiddle.net/dqn4ey6p/

Pozdrawiam

Pokaż 24 poprzednich komentarzy

komentarz 11 maja 2015 przez Krzysiek_34 Mądrala (6,110 p.)

Teraz jest lepiej, ale w drugiej linijce jest napisane w żółtym kolorze: "Rok produkcji: undefined"

komentarz 11 maja 2015 przez toaspzoo Dyskutant (8,300 p.)

Niemożliwe. Z mojego kodu nie mogło nic takiego wyniknąć. Wygląda na to, że w Twoim kodzie zmienna, której próbujesz użyć, nie istnieje.

komentarz 11 maja 2015 przez Krzysiek_34 Mądrala (6,110 p.)

Czyli mam sobie odpuścić czy jest sansa na coś?

komentarz 11 maja 2015 przez toaspzoo Dyskutant (8,300 p.)

Zawsze jest. Nie widzę Twojego kodu. Nie poddawaj się ;)

komentarz 11 maja 2015 przez Krzysiek_34 Mądrala (6,110 p.)

Nad obrazkiem widnieje napis (na czerwono):

2009" data-tooltip2="linia3">

Po najechaniu na obrazek w ramce jest napisane (na żółto):

Rok produkcji: undefined