Persönliche Werkzeuge

Vorlage:ToolTip

Aus BogenWiki

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
Zeile 11: Zeile 11:
|  
|  
; (1): <tt>CSS&nbsp;&nbsp;</tt> Fügt den CSS-Code für ToolTips auf der Seite ein
; (1): <tt>CSS&nbsp;&nbsp;</tt> Fügt den CSS-Code für ToolTips auf der Seite ein
-
:      <tt>Start</tt>           Markiert den Anfang des Textes der im ToolTip angezeigt werden soll.
+
:      <tt>Start</tt>           Markiert den Anfang des Textes der im ToolTip angezeigt werden soll.
-
:      <tt>Ende&nbsp;</tt>       Markiert das Ende des Textes der im ToolTip angezeigt werden soll.
+
:      <tt>Ende&nbsp;</tt>     Markiert das Ende des Textes der im ToolTip angezeigt werden soll.
-
; (2): Eindeutige ID des ToolTips
+
; (2): Wenn (1)=<tt>Start</tt>: Text (Wort, Abkürzung etc.) für den der ToolTip angezeigt werden soll.
|}
|}
-
{{Button|Caption=Test-Button 1|ID=TestBtn1|OnEvent=TestBtnEvent}}
+
{{ToolTip|CSS}}
-
{{Button|Caption=Test-Button 2|ID=TestBtn2|OnEvent=TestBtnEvent}}
+
Über dem Wort {{ToolTip|Start|hier}}Die ist ein ToolTip...{{ToolTip|Ende}} wird ein ToolTip angezeigt.
-
<html><script type="text/javascript">
+
-
sActiveBtnID = '';
+
-
sActiveBgColor = '#808080';
+
-
sActiveCaColor = 'white';
+
-
sInactiveBgColor = '#E0E0E0';
+
-
sInactiveCaColor = 'black';
+
-
sHoverBgColor = '#D0D0D0';
+
-
sHoverCaColor = 'black';
+
-
function TestBtnEvent(sID,sEvent) {
+
-
  eButton = document.getElementById(sID);
+
-
  switch (sEvent) {
+
-
  case 'onmouseenter':
+
-
    if (sID != sActiveBtnID) {
+
-
      eButton.style.background=sHoverBgColor;
+
-
      eButton.style.color=sHoverCaColor;
+
-
    }
+
-
    break;
+
-
  case 'onmouseleave':
+
-
    if (sID != sActiveBtnID) {
+
-
      eButton.style.background=sInactiveBgColor;
+
-
      eButton.style.color=sInactiveCaColor;
+
-
    }
+
-
    break;
+
-
  case 'onclick':
+
-
    // alert('Button "'+sID+'" angeklickt !!!');
+
-
    if (sID != sActiveBtnID) {
+
-
      if (sActiveBtnID != '') {
+
-
        eButtonOld = document.getElementById(sActiveBtnID);
+
-
        eButtonOld.style.background=sInactiveBgColor;
+
-
        eButtonOld.style.color=sInactiveCaColor;
+
-
      }
+
-
      sActiveBtnID = sID;
+
-
      eButton.style.background=sActiveBgColor;
+
-
      eButton.style.color=sActiveCaColor;
+
-
    } else {
+
-
      sActiveBtnID = '';
+
-
      eButton.style.background=sInactiveBgColor;
+
-
      eButton.style.color=sInactiveCaColor;
+
-
    }
+
-
    break;
+
-
  case 'onload':
+
-
    eButton.style.background=sInactiveBgColor;
+
-
    eButton.style.color=sInactiveCaColor;
+
-
    break;
+
-
  }
+
-
}
+
-
</script></html>
+
</noinclude><includeonly><nowiki
</noinclude><includeonly><nowiki
-
/><html><div id="</html>{{{ID}}}<html>" onload="</html>{{{OnEvent}}}<html>('</html>{{{ID}}}<html>','onload')" onclick="</html>{{{OnEvent}}}<html>('</html>{{{ID}}}<html>','onclick')" onmouseenter="</html>{{{OnEvent}}}<html>('</html>{{{ID}}}<html>','onmouseenter')" onmouseleave="</html>{{{OnEvent}}}<html>('</html>{{{ID}}}<html>','onmouseleave')" style="display:inline-block;padding:4px 8px 3px 8px;background:#E0E0E0;border:solid #D0D0D0 1px;color:black;cursor:pointer;"><b></html>{{{Caption}}}<html></b></div></html><nowiki
+
/>{{#switch:{{{1|XXX}}}
-
/></includeonly>
+
|CSS=<html>
 +
<style type="text/css" media="screen">
 +
  main {
 +
    width: 80%;
 +
    margin: 0 auto;
 +
  }
 +
  .tooltip {
 +
    color: #c32e04;
 +
    text-decoration: underline;
 +
    cursor: help;
 +
    position: relative;
 +
  }
 +
  .tooltip span[role=tooltip] {
 +
    display: none;
 +
  }
 +
  .tooltip:hover span[role=tooltip] {
 +
    display: block;
 +
    position: absolute;
 +
    bottom: 1em;
 +
    left: -6em;
 +
    width: 15em;
 +
    padding: 0.5em;
 +
    z-index: 100;
 +
    color: #000;
 +
    background-color: #ffebe6;
 +
    border: solid 1px #c32e04;
 +
    border-radius: 0.2em;
 +
  }
 +
</style></html>
 +
|Start=<html><dfn class="tooltip">{{{2|<span style="color:red">ToolTip: 2. Parameter fehlt !!!</span><span role="tooltip"></html>
 +
|Ende=<html></span></dfn></html>
 +
|DEFAULT=<span style="color:red">ToolTip: 1. Parameter falsch ({{{1}}}) !!!</span>
 +
}}</includeonly>

Version vom 19:19, 27. Nov. 2021

Name: ToolTip
Beschreibung: Erzeugt ein ToolTip oberhalb des Elements ...
Parameter:
(1)
CSS   Fügt den CSS-Code für ToolTips auf der Seite ein
Start Markiert den Anfang des Textes der im ToolTip angezeigt werden soll.
Ende  Markiert das Ende des Textes der im ToolTip angezeigt werden soll.
(2)
Wenn (1)=Start: Text (Wort, Abkürzung etc.) für den der ToolTip angezeigt werden soll.

Über dem Wort hier

Die ist ein ToolTip...
wird ein ToolTip angezeigt.


Von „https://www.nugman.info/bogenwiki/index.php?title=Vorlage:ToolTip“