Jdi na obsah Jdi na menu

ToolTip

ToolTip je rámeček, který se objeví po najetí na určitou část stránky. Můžou tam být napsané nějaké podrobnější informace nebo nápověda. Znamý je z on-line her (BiteFight, Gladiatus, Katsuro ...).

 

Kompatibilita

Současná verze eStránek:  ANO
Nová verze eStránek:
 ANO

Testováno 2. ledna 2010

 

Příklad

Najeďte na tento text ...

 

Zdrojový soubor

Aby na vašich stránkách fungoval tooltip, musíte si na ně nejdřív nahrát zdrojový kód:

  1. Stáhněte si tento soubor.
  2. Rozbalte ho a soubor tooltip.js otevřete v Poznámkovém bloku (Start - Programy - Příslušenství) - můžete použít i jiný program na editaci kódu, já používám PSPad.
  3. Najděte v něm toto:
    //---------------------------------------------------------
    // Configuration
    //---------------------------------------------------------
      this.width = 200;                     // width (pixels)
      this.bgColor = "#000000";             // background color
      this.textFont = "Times New Roman";      // text font family
      this.textSize = 15;                   // text font size (pixels)
      this.textColor = "#ffffff";           // text color
      this.border = "1px solid #ffffff";   // border (CSS spec: size style color, e.g. "1px solid #D00000")
      this.opacity = 90;                    // opacity (0 - 100); not supported by all browsers
      this.cursorDistance = 15;              // distance from mouse cursor (pixels)
      this.xPos = 'right';                  // horizontal position: "left" or "right"
      this.yPos = 'bottom';                 // vertical position: "top" or "bottom"
    200 - Šířka tooltipu v pixelech
    #000000 - Kód barvy pozadí
    Times New Roman - Písmo
    15 - Velikost písma v pixelech (4px = 3pt)
    #ffffff - Barva textu
    1 - Šířka rámečku
    #ffffff - Barva rámečku
    90 - Průlednost (0 - neviditelný, 100 - neprůhledný)
    15 - Vzdálenost od kurzoru
    right - Horizontální pozice od kurzoru (right - napravo, left - nalevo)
    bottom - Vertikální pozice od kurzoru (top - nahoře, bottom - dole)
  4. Upravený soubor uložte a nahrajte do Nastavení - Rozšířené - Soubory.
  5. Otevřete Nastavení - Vzhled - Design - Úprava kódu šablony - Hlavní šablona.
  6. Za <head> vložte:
    <script src="url" type="text/javascript"></script>
    url - URL souboru tooltip.js

 

Vložení

Zdrojový kód máme nahraný a teď si ukážeme, jak ToolTip k nejakému objektu vložit.

  1. Vytvořte nebo si otevřete již vytvořený příspěvek nebo stránku.
  2. Přepněte si na HTML pomocí tlačítka "WYSIWYG / HTML" nad editorem.
  3. Vyberte si nějaký <tag> například <p> - řádek. Po najetí na řádek se zobrazí ToolTip.
  4. Do tagu vložte:
    <p onmouseover="toolTip('text')" onmouseout="toolTip()">
    text - Text, který se bude zobrazovat v ToolTipu
  5. Uložte a máte hotovo
 

Komentáře

Přidat komentář

Přehled komentářů

123456789 - toolTip

13. 11. 2010 16:23

Bude to fungovat i na tag b ???
<b onmouseover="toolTip('text')" onmouseout="toolTip()">Text</b>

Odpovědět

Baegus - Skvělé

24. 4. 2010 14:52

Je to bezvadný! Mám to na webu a je to fakt hezký a jednoduchý. *THUMBS_UP*

Odpovědět

Tomáš Hypeš - Re: ToolTip

2. 2. 2010 13:05

Ty si to nedal za <head>, ale za </head>!

Odpovědět

belliko - ToolTip

2. 2. 2010 12:52

Nejde to vůbec, ažádný ko dse nezobrazuje, je to jednoduché tak, že to ani nejde. prosím porad

Odpovědět

NOIR - fuha

1. 2. 2010 17:48

vypada to dost zlozito ...

Odpovědět