Dymek po najechaniu na obrazek.

[IZZER4]

Witam, chcialbym zrobic dymek ktory wyswietla sie po najechaniu na obrazek.

Kombinowalem z http://tooltipsy.com/index

Ale problem jest w tym ze ja chce nadac dla kazdego obrazka oddzielny tekst ktory bedzie edytowany przez js.

<img src = "button1.jpg" id = "id1" class="light-bulb" style="top: 13%; left: 15%" onClick="zmien(1);">

Macie moze pomysl jak to zrobic?

[TiREX69]

­Bardzo, prosto. Zwłaszcza w tej bibliotece tooltipsy.

1. W bibliotece tooltipsy:

- dodajesz do elementu <img> atrybut title czyli <img title="costam"

- ustawiasz id obrazka czyli <img id="identyfikator"

- i po załadowaniu strony dodajesz skrypt $("#identyfikator").tooltipsy();

- edytujesz tooltipy za pomocą $("#identyfikator").title("nowy tooltip");

 

2. W bibliotece jquery-tooltip https://jqueryui.com/tooltip/

- wszystko praktycznie to samo co u góry tylko zamiast $("#identyfikator").tooltipsy(); dajesz $("#identyfikator").tooltip();

- w bibliotece od jquery nie masz "ładnych" tooltipów, ale można wszystko "upiększyć" w css3

[IZZER4]

Nie wiem czemu ale cos mi nie dziala.

Pliki js mam w tym samym katalogu.

Kod js;

<script type="text/javascript"src="tooltipsy.min.js">
 $("#id1").tooltipsy();
</script>

Img

   <img src = "button1.jpg" id = "id1" class="light-bulb" style="top: 13%; left: 15%" onClick="zmien(1);" title="Sprawdzamy to gówno">

Css

.tooltipsy
{
    padding: 10px;
    max-width: 200px;
    color: #303030;
    background-color: #f5f5b5;
    border: 1px solid #deca7e;
}

[TiREX69]

Musisz mieć jQuery dodatkowo nie możesz chyba używać tego kodu w tym samym elemencie script, w którym to ładujesz.

 

­

[IZZER4]

Dodalem jquery, dalem skrypt w innym elemencie i nadal nic..

  <script type="text/javascript"src="tooltipsy.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <img src = "button1.jpg" id = "id1" class="light-bulb" style="top: 13%; left: 15%" onClick="zmien(1);" title="Sprawdzamy to gówno<br>">
<script type="text/javascript">
 $("#id1").tooltipsy();
</script>

[Writen]

jQuery musisz załadować w pierwszej kolejności. Dopiero później inne skrypty.
Wszystkie skrypty umieszczaj tuż przed 

</body>