20061117: tooltips can be nested in other (static) tooltips. Click the above link and in the Dutch user instructions screen click again on the word 'aangestuurd'. Within the now opening tooltips, 2 different tooltips are nested also. The possible number of nesting levels is unlimited, but I suppose one can overdo it.
IE 7 problems
voorbeelden/examples
1/ tooltip on complete box
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
testing 2 selectboxes IE
2/ nesting tooltips
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
test selector (IE specific, tooltips have to overlap this selector) test no valid text available test no ttxt attribute test tooltip txt from js static test tooltip txt from js function test tooltip txt from non existing
test checkbox tooltip
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains
Links: EN: user instructions
> Hoe gebruik ik dit script?
Tooltips?
Tooltips zijn verklarende tekstjes die verschijnen wanneer men met de muis over bijvoorbeeld een knop, tekst of tabel in een programma of webpagina beweegt. Voor webpagina's geldt dat een tooltip door gebruik van het 'title'-attribuut kan worden geëmuleerd. Zo zie je bij deze onderstreepte tekst, wanneer je je muis eroverheen beweegt, na een korte pauze een klein titeltje verschijnen. Er kan aan zulke tooltips niets veranderen. Er kan geen html worden gebruikt, de tijd waarbinnen de tooltip verschijnt is niet aan te passen, enzovoort.
Daarom is het tooltips-programma gemaakt waarvan deze pagina een voorbeeld is. Daarmee kun je tooltips maken die op veel verschillende manieren te gebruiken zijn.
Links: EN: user instructions
< Wat zijn tooltips? > Welke attributen kan ik gebruiken?
Hoe gebruik ik dit script?
Tooltips worden geactiveerd door attributen in een een html-element te zetten. Bijvoorbeeld:
<span id="xyz" tt="1" ttHover="red" ttBGC="yellow" tTxt="dit is een voorbeeld" ttc="help" ttUseStyle="dotline_red">HELLUP</span>
Wat er in een HTML-pagina als volgt uitziet:
HELLUP!
Links: EN: user instructions
< Wat zijn tooltips?
< Hoe gebruik ik dit script? > Voorbeelden?
Welke attributen kan ik gebruiken?
tt = "[any value]" => activeert tooltip voor onderhavig element
ttxt = "[string]" => tekst tooltip direct als attribuut (vergeet niet eventuele ' te escapen)
ttxtid = "[string]" => tekst tooltip uit (verborgen) div met deze id halen
ttxtJs = "[string:span]" => haalt tekst uit de voorgedefinieerde collectie jsTxt (zie TxtFromJs())
ttxtJsFn = "[string:function name]" => krijgt de tekst uit een javascript-functie die een string retourneert
ttw = "[integer] => breedte tooltip in pixels. Default wordt de breedte automatisch gezet, tenzij deze groter is dan 1/8 van het scherm. Dit attribuut overruled dat. LET OP: daarmee kan het voorkomen dat een tooltip niet meer op het scherm wil passen.
ttUseStyle = "[string:classname]" => gebruik stijltje voor aanwijsbare elementen
ttNoOpa = "[any value]" => geen transparantie in [deze] tooltip gebruiken
ttDescend = "[any value]" => zoekt, wanneer dit van toepassing is, het diepste niveau binnen tooltip element en verplaatst tooltips daar naartoe.
ttNoDelay = "[any value]" => geen vertraging in [deze] tooltip gebruiken
ttHeader = "[string]" => gebruik tekst van dit attribuut als kopje voor tooltip (zie tooltip bovenste vak)
ttNoBreak = "[any value]" => linebreaks worden standaard naar html <br> omgezet. Met dit attribuut niet.
ttStatic = "[string]" => tooltip opent/sluit met klik, beweegt niet met muis mee (zie deze tooltip). Een tooltip met dit attribuut sluit ook als je op de header van tooltip zelf klikt.
ttHover = "[string:kleurwaarde]" => geeft hovereffect (kleurwijziging) voor element waar tooltip overheen komt
kleurwaarde: elke html-kleur bv #EEE, #c0c0c0, red, green, óf bv RGB(255,217,177) etc.
*stijlen tooltip:
In het script bovenin, functie pageLoader, de variabelen:
sTtStyle => tooltipcontainer
sTtHeadStyle => kopje tooltip
sTtParStyle => tekst van de tooltip
*opmerkingen:
[any value] attributen kunnen ook zonder waarde, BEHALVE als je de tooltips in IE versie < 6 wilt gebruiken
defaultstijlen voor tooltip zijn in het script gedefinieerd. Als je eigen stijlen wilt gebruiken, definieer die dan in een style sheet, met de classes:
.tooltip de tooltipcontainer. Padding, margin, position,z-Index, hoogte en breedte worden overruled. Background-color is aan te raden.
.tooltipHeader het kopje. Position wordt overruled
.tooltipParagraph de textformattering. Definieer hier bvk alleen padding, fontstyle en (achtergrond-)kleuren
Links: EN: user instructions
< Wat zijn tooltips?
< Hoe gebruik ik dit script? < Attributen?
Voorbeelden?
Links: NL: gebruiksaanwijzing
*add tooltips for elements [xyz]:
Tooltips are determined by putting attributes in any html entity. For example:
<span id="xyz" tt="1" ttc="pointer" ttxt="this is an example" ttw="150">yada yada yada</span>
No use to specify attributes you don't need (like ttw etc). See example above.
*tooltip attributes can be (attributes marked with * are obligatory):
tt* = "[any value]" => activates tooltip for the element
ttxt* = "[string]" => the text for the tooltip (directly as attribute value: you need to escape '/")
ttxtid = "[string]" => get text tooltip from (hidden) div with id from this attribute
ttxtJs = "[string:span]" => get a text from the predefined collection jsTxt
ttxtJsFn = "[string:function name]" => get a text from a javascript function returning a string
ttc = "[string (e.g. help, crosshair, pointer)]" => cursor to be used with mouseover/hover
ttw = "[integer] => tooltip width in pixels. The default width is auto, unless it's more than 1/8 of the actual screen. This attribute overrules these defaults. NB: your tooltip can run off the screen if this attribute is used.
ttUseStyle = "[string:classname]" => use the style defined in classname (css stylesheet) for the element where this tooltip is applied
ttNoOpa = "[any value]" => do not use opacity in [this] tooltip
ttDescend = "[any value]" => identifies (if applicable) the deepest level within tooltip element and moves tooltips to that element.
ttNoDelay = "[any value]" => do not use a delay in showing [this] tooltip.
ttHeader = "[string]" => the value of this attribute will be the tooltip header
ttNoBreak = "[any value]" => linebreaks default are converted to html <br>'s. This attribute overrules.
ttStatic = "[string]" => tooltip opens/closes with a mouse click and doesn't move with mouse movements. The header of the tooltip gets a click handler to close the tooltip.
ttHover = "[string:colorvalue]" => adds a hover effect (colorchange only) for tooltip element
color value: any html-color like #EEE, #c0c0c0, red, green, or RGB(255,217,177) etc.
*tooltip default styling:
Top of script, function pageLoader, variables:
sTtStyle => tooltip container
sTtHeadStyle => tooltip header
sTtParStyle => tooltip text paragraph
*remarks:
[any value] attributes can do without a value, but not when you want to use tooltips in IE version < 6. To be safe, always use [attribute=value]
tooltip default styles are defined scriptwise. You can use your own styling in a style sheet, by defining the following classes:
.tooltip the tooltip container. Padding, margin, position,z-Index, height and width are overruled. Background-color is advised.
.tooltipHeader the tooltip header. Position property is overruled here
.tooltipParagraph the tooltip text paragraph. Only define padding, fontstyle and (background-)color