CSS Tooltipps

Anleitung CSS Tooltips für Grafik-Absätze

BEISPIEL EINGEBAUT IN BAXLEY W2D 8 **

Eine Anleitung von Harlekin8
Download der kompletten Anleitung mit allen Dateien [11 KB]

Kein Konflikt mit evtl. anderen vorhandenen Javascript-Lösungen
Ist mit vielen Möglichkeiten verknüpft (Positionsangabe, Farbe, Rahmen und so weiter ... und beruht weitestgehend auf CSS bis auf die Hintergrund-Grafiken für die Tooltipps). Der Ansatz nur mit Grafiken ist auch möglich ...

Wie dem auch sei, als "Informationsbox" ist es feine Sache.

Für W2D 7 / 8 - "Absatz-Grafik" (wenn "keine Aktion" ausgewählt)
================================================================================
1.) es läuft auf (fast! IE > 6 -dem schenke ich keine Beachtung mehr) jedem Browser.
IE 7 Bug:
Falls ein IE stylesheet wie z.Bp. im style_ie6.css schon vorhanden ist: folgenden Eintrag ergänzen:
1a.)Conditional Comment in navigation.ccml so abändern --> Titel wird sonst beim IE7 aus Tooltip rausgeschoben:
von: <!-- [if IE 6] ... in :<!-- [if IE lt 8] ...
1b.)folgenden Eintrag ergänzen:

.tthref:hover span.ttinfo em{
display: inline-block; /* IE7 Bug */
}
Falls im Design so ein Stylesheet fehlen sollte, selbst eins anfertigen
================================================================================
2.) Die Grafiken im Design-Ordner einfügen
3.) in der global.ccml obige Grafiken anmelden:

<cc:*> CSS Tooltip </cc:*>
<cc:asset src="yellow_pix.png" dst="yellowpx.png" obj="ttbyel" noparse="1">
<cc:asset src="white_pix.png" dst="whitepx.png" obj="ttbwhi" noparse="1">
<cc:asset src="red_pix.png" dst="redpx.png" obj="ttbred" noparse="1">
<cc:asset src="blue_pix.png" dst="bluepx.png" obj="ttbblu" noparse="1">
<cc:asset src="orange_pix.png" dst="orangepx.png" obj="ttbora" noparse="1">
<cc:asset src="green_pix.png" dst="greenpx.png" obj="ttbgre" noparse="1">
<cc:asset src="gray_pix.png" dst="graypx.png" obj="ttbgra" noparse="1">
<cc:asset src="purple_pix.png" dst="purplepx.png" obj="ttbpur" noparse="1">
<cc:asset src="black_pix.png" dst="blackpx.png" obj="ttbblack" noparse="1">
<cc:asset src="blue_ver_v.png" dst="bluevfv.png" obj="ttbbluevv" noparse="1">
<cc:asset src="green_ver_v.png" dst="greenvfv.png" obj="ttbgreenvv" noparse="1">
<cc:asset src="yellow_ver_v.png" dst="yellowvfv.png" obj="ttbyellowvv" noparse="1">
<cc:asset src="red_ver_v.png" dst="redvfv.png" obj="ttbredvv" noparse="1">
<cc:asset src="orange_ver_v.png" dst="orangevfv.png" obj="ttborangevv" noparse="1">
<cc:asset src="purple_ver_v.png" dst="purplevfv.png" obj="ttbpurplevv" noparse="1">
<cc:asset src="black_ver_v.png" dst="blackvfv.png" obj="ttbblackvv" noparse="1">
<cc:asset src="gray_ver_v.png" dst="grayvfv.png" obj="ttbgrayvv" noparse="1">
================================================================================
4.) in der config.ccml diesen Satz an erweiterten Eigenschaften einbinden:
<cc:*> Absatz Grafik Tooltips </cc:*>
<cc:property id="tooltips.picture.aktiv" caption="Aktivierung Tooltip" folder="Tooltip" targettype="paragraph" type="boolean" default="0">
<cc:property id="tooltips.picture.text" caption="Text für Tooltip" folder="Tooltip" targettype="paragraph" type="text" default="">
<cc:property id="tooltips.picture.liste" caption="Liste für Tooltip" folder="Tooltip" targettype="paragraph" type="string" default="">
<cc:property id="tooltips.picture.background.grafik" caption="Farbe Hintergrundgrafik Tooltip" folder="Tooltip (Layout)" targettype="paragraph" type="combo" comboitems="black|blue|red|green|gray|yellow|purple|white|orange|gruener_verlauf_vertikal|blauer_verlauf_vertikal|roter_verlauf_vertikal|oranger_verlauf_vertikal|gelber_verlauf_vertikal|lila_verlauf_vertikal|grauer_verlauf_vertikal|schwarzer_verlauf_vertikal" default="black">
<cc:property id="tooltips.picture.background.color" caption="Hintergrundfarbe Tooltip" folder="Tooltip (Layout)" targettype="paragraph" type="color" default="">
<cc:property id="tooltips.picture.position.x" caption="Position x-Achse Tooltip" folder="Tooltip" targettype="paragraph" type="long" default="0">
<cc:property id="tooltips.picture.position.y" caption="Position y-Achse Tooltip" folder="Tooltip" targettype="paragraph" type="long" default="0">
<cc:property id="tooltips.picture.breite" caption="Breite Tooltip" folder="Tooltip (Layout)" targettype="paragraph" type="long" max="800" default="200">
<cc:property id="tooltips.picture.rahmen.anzeigen" caption="Rahmen Tooltip anzeigen" folder="Tooltip (Layout)" targettype="paragraph" type="boolean" default="1">
<cc:property id="tooltips.picture.rahmen.color" caption="Rahmenfarbe Tooltip wählen" folder="Tooltip (Layout)" targettype="paragraph" type="color" default="#ffffff">
<cc:property id="tooltips.picture.rahmen.breite" caption="Rahmenbreite Tooltip bestimmen" folder="Tooltip (Layout)" targettype="paragraph" type="long" min="1" max="10" default="4">
<cc:property id="tooltips.picture.rahmen.style" caption="Rahmenstil Tooltip wählen" folder="Tooltip (Layout)" targettype="paragraph" type="combo" comboitems="none|solid|dotted|double|dashed" default="solid">
<cc:property id="tooltips.picture.caption" caption="Überschrift Tooltip eingeben" folder="Tooltip" targettype="paragraph" type="string" default="">
<cc:property id="tooltips.picture.caption.color" caption="Farbe Überschrift wählen" folder="Tooltip (Layout)" targettype="paragraph" type="color" default="#666666">
<cc:property id="tooltips.picture.text.color" caption="Textfarbe wählen" folder="Tooltip (Layout)" targettype="paragraph" type="color" default="#999999">
<cc:property id="tooltips.picture.text.align" caption="Textausrichtung wählen" folder="Tooltip (Layout)" targettype="paragraph" type="combo" comboitems="left|right|center|justify" default="justify">
<cc:property id="tooltips.picture.css3.on" caption="Aktivierung Tooltip CSS3" folder="Tooltip (Layout CSS3)" targettype="paragraph" type="boolean" default="0">
<cc:property id="tooltips.picture.rahmen.ecken" caption="Bestimmung Eckenkrümmung Tooltip" folder="Tooltip (Layout CSS3)" targettype="paragraph" type="string" default="8px">
<cc:property id="tooltips.picture.shadow" caption="Einstellung Boxschatten Tooltip" folder="Tooltip (Layout CSS3)" targettype="paragraph" type="string" default="3px 3px 8px 0px">
<cc:property id="tooltips.picture.grafik" caption="Bild in Tooltip" folder="Tooltip (Bild)" targettype="paragraph" type="picture">
<cc:property id="tooltips.picture.grafik.position" caption="Bildausrichtung zum Text" folder="Tooltip (Bildeigenschaften)" targettype="paragraph" type="combo" comboitems="oben|unten|links|rechts" default="oben">
<cc:property id="tooltips.picture.grafik.full" caption="Volles Bild (Titel + Text auf Standard)" folder="Tooltip (Bildeigenschaften)" targettype="paragraph" type="boolean" default="0">

================================================================================
5.) in der paragraph_picture.ccml wird aus folgender Passage:

<cc:if cond="&paragraph.picture.zoom.isnone">
<cc:printpicture xhtml="1" obj="'bigpic_'+&plugin.width">
</cc:if>

... DAS:

<cc:*>============= Mit CSS Tooltip Funktion ======================= </cc:*>

<cc:if cond="&para.properties.tooltips.picture.aktiv">
<div class="tooltip">
<a class="tthref" href="#none">
</cc:if>
<cc:if cond="&paragraph.picture.zoom.isnone">
<cc:printpicture xhtml="1" obj="'bigpic_'+&plugin.width">
</cc:if>
<cc:if cond="&para.properties.tooltips.picture.aktiv">
<cc:*>==================== Layout Tooltip Allg. ======================</cc:*>
<cc:*> Hintergrundfarbe ausgewählt, setzt die Background-Class ausser Kraft </cc:*>
<span class="ttinfo<cc:if cond="&para.properties.tooltips.picture.background.color">"<cc:else> <cc:print value='&para.properties.tooltips.picture.background.grafik'>"</cc:if> style="width:<cc:print value="&para.properties.tooltips.picture.breite">px;
background-color:<cc:print value="&para.properties.tooltips.picture.background.color">!important;
left:<cc:print value="&para.properties.tooltips.picture.position.x">px;
top:<cc:print value="&para.properties.tooltips.picture.position.y">px;
color:<cc:print value="&para.properties.tooltips.picture.text.color">;
text-align: <cc:print value="&para.properties.tooltips.picture.text.align">;
<cc:if cond="&para.properties.tooltips.picture.css3.on">
-webkit-box-shadow:<cc:print value="&para.properties.tooltips.picture.shadow"> #000;
-moz-box-shadow:<cc:print value="&para.properties.tooltips.picture.shadow"> #000;
-ms-box-shadow:<cc:print value="&para.properties.tooltips.picture.shadow"> #000;
box-shadow:<cc:print value="&para.properties.tooltips.picture.shadow"> #000;
-webkit-border-radius:<cc:print value="&para.properties.tooltips.picture.rahmen.ecken">;
-moz-border-radius:<cc:print value="&para.properties.tooltips.picture.rahmen.ecken">;
border-radius:<cc:print value="&para.properties.tooltips.picture.rahmen.ecken">;</cc:if>
<cc:if cond="&para.properties.tooltips.picture.rahmen.anzeigen">
border-color:<cc:print value="&para.properties.tooltips.picture.rahmen.color">;
border-width:<cc:print value="&para.properties.tooltips.picture.rahmen.breite">px;
border-style:<cc:print value="&para.properties.tooltips.picture.rahmen.style">;</cc:if>">
<cc:*> BILDAUSGABE oberhalb TEXT</cc:*>
<cc:if cond="&para.properties.tooltips.picture.grafik.position.number=1">
<cc:if cond="&para.properties.tooltips.picture.grafik.uid"><cc:set value="&para.properties.tooltips.picture.breite" obj="picbreite">
<cc:picture obj="pic.grafik" uid="&para.properties.tooltips.picture.grafik.uid" boxwidth="&picbreite" heigth="(&picbreite * 3) div 4" suffix="_ttpic">
<cc:if cond="&para.properties.tooltips.picture.grafik.full">
<cc:printpicture class="full" obj="pic.grafik_ttpic" xhtml="1" width="&picbreite" height="(&picbreite * 3) div 4">
<cc:else>
<cc:printpicture obj="pic.grafik_ttpic" xhtml="1" width="&picbreite" height="(&picbreite * 3) div 4">
</cc:if>
</cc:if>
</cc:if>
<cc:*> AUSGABE BILD LINKS / TEXT </cc:*>
<cc:if cond="&para.properties.tooltips.picture.grafik.position.number=3">
<cc:if cond="&para.properties.tooltips.picture.grafik.uid"><cc:set value="&para.properties.tooltips.picture.breite" obj="picbreite">
<cc:set value="(&picbreite div 2) - 10" obj="picbreite">
<cc:picture obj="pic.grafik" uid="&para.properties.tooltips.picture.grafik.uid" boxwidth="&picbreite" heigth="(&picbreite * 3) div 4" suffix="_ttpic">
<strong style="float: left; margin: -10px 10px 0px 0;"><cc:printpicture obj="pic.grafik_ttpic" xhtml="1" width="&picbreite" height="(&picbreite * 3) div 4">
</strong>
</cc:if>
</cc:if>
<cc:*> AUSGABE TEXT / BILD RECHTS</cc:*>
<cc:if cond="&para.properties.tooltips.picture.grafik.position.number=4">
<cc:if cond="&para.properties.tooltips.picture.grafik.uid"><cc:set value="&para.properties.tooltips.picture.breite" obj="picbreite">
<cc:set value="(&picbreite div 2) - 10" obj="picbreite">
<cc:picture obj="pic.grafik" uid="&para.properties.tooltips.picture.grafik.uid" boxwidth="&picbreite" heigth="(&picbreite * 3) div 4" suffix="_ttpic">
<strong style="float: right; margin: -10px 0px 0px 10px;"><cc:printpicture obj="pic.grafik_ttpic" xhtml="1" width="&picbreite" height="(&picbreite * 3) div 4">
</strong>
</cc:if>
</cc:if>
<cc:*> TEXTAUSGABE bzw. ÜBERSCHRIFT</cc:*>
<cc:if cond="&para.properties.tooltips.picture.text OR &para.properties.tooltips.picture.caption">
<em style="color: <cc:print value="&para.properties.tooltips.picture.caption.color">;"><cc:print value="&para.properties.tooltips.picture.caption"></em><br /><br />
<cc:print value="&para.properties.tooltips.picture.text">
</cc:if>
<cc:*> BILDAUSGABE unterhalb TEXT</cc:*>
<cc:if cond="&para.properties.tooltips.picture.grafik.position.number=2">
<cc:if cond="&para.properties.tooltips.picture.grafik.uid"><cc:set value="&para.properties.tooltips.picture.breite" obj="picbreite">
<cc:picture obj="pic.grafik" uid="&para.properties.tooltips.picture.grafik.uid" boxwidth="&picbreite" heigth="(&picbreite * 3) div 4" suffix="_ttpic">
<cc:if cond="&para.properties.tooltips.picture.grafik.full">
<cc:printpicture class="full" obj="pic.grafik_ttpic" xhtml="1" width="&picbreite" height="(&picbreite * 3) div 4">
<cc:else>
<cc:printpicture obj="pic.grafik_ttpic" xhtml="1" width="&picbreite" height="(&picbreite * 3) div 4">
</cc:if>
</cc:if>
</cc:if>
</span></a></div></cc:if>
<cc:*>============= ENDE CSS Tooltip Funktion ======================= </cc:*>

und in der page.ccml (ebenfalls bei ...zoom.isnone):

<cc:*>============= Mit CSS Tooltip Funktion ======================= </cc:*>

<cc:if cond="&para.properties.tooltips.picture.aktiv">
<div class="tooltip">
<a class="tthref" href="#none">
</cc:if>
<cc:if cond="&para.sidepicture.zoom.isnone">
<cc:printpicture class="picture" xhtml="1" obj="parapic_160">
</cc:if>
<cc:if cond="&para.properties.tooltips.picture.aktiv">
<cc:*>==================== Layout Tooltip Allg. ======================</cc:*>
<cc:*> Hintergrundfarbe ausgewählt, setzt die Background-Class ausser Kraft </cc:*>
<span class="ttinfo<cc:if cond="&para.properties.tooltips.picture.background.color">"<cc:else> <cc:print value='&para.properties.tooltips.picture.background.grafik'>"</cc:if> style="width:<cc:print value="&para.properties.tooltips.picture.breite">px;
background-color:<cc:print value="&para.properties.tooltips.picture.background.color">!important;
left:<cc:print value="&para.properties.tooltips.picture.position.x">px;
top:<cc:print value="&para.properties.tooltips.picture.position.y">px;
color:<cc:print value="&para.properties.tooltips.picture.text.color">;
text-align: <cc:print value="&para.properties.tooltips.picture.text.align">;
<cc:if cond="&para.properties.tooltips.picture.css3.on">
-webkit-box-shadow:<cc:print value="&para.properties.tooltips.picture.shadow"> #000;
-moz-box-shadow:<cc:print value="&para.properties.tooltips.picture.shadow"> #000;
-ms-box-shadow:<cc:print value="&para.properties.tooltips.picture.shadow"> #000;
box-shadow:<cc:print value="&para.properties.tooltips.picture.shadow"> #000;
-webkit-border-radius:<cc:print value="&para.properties.tooltips.picture.rahmen.ecken">;
-moz-border-radius:<cc:print value="&para.properties.tooltips.picture.rahmen.ecken">;
border-radius:<cc:print value="&para.properties.tooltips.picture.rahmen.ecken">;</cc:if>
<cc:if cond="&para.properties.tooltips.picture.rahmen.anzeigen">
border-color:<cc:print value="&para.properties.tooltips.picture.rahmen.color">;
border-width:<cc:print value="&para.properties.tooltips.picture.rahmen.breite">px;
border-style:<cc:print value="&para.properties.tooltips.picture.rahmen.style">;</cc:if>">
<cc:*> BILDAUSGABE oberhalb TEXT</cc:*>
<cc:if cond="&para.properties.tooltips.picture.grafik.position.number=1">
<cc:if cond="&para.properties.tooltips.picture.grafik.uid"><cc:set value="&para.properties.tooltips.picture.breite" obj="picbreite">
<cc:picture obj="pic.grafik" uid="&para.properties.tooltips.picture.grafik.uid" boxwidth="&picbreite" heigth="(&picbreite * 3) div 4" suffix="_ttpic">
<cc:printpicture obj="pic.grafik_ttpic" xhtml="1" width="&picbreite" height="(&picbreite * 3) div 4">
</cc:if>
</cc:if>
<cc:*> AUSGABE BILD LINKS / TEXT </cc:*>
<cc:if cond="&para.properties.tooltips.picture.grafik.position.number=3">
<cc:if cond="&para.properties.tooltips.picture.grafik.uid"><cc:set value="&para.properties.tooltips.picture.breite" obj="picbreite">
<cc:set value="(&picbreite div 2) - 10" obj="picbreite">
<cc:picture obj="pic.grafik" uid="&para.properties.tooltips.picture.grafik.uid" boxwidth="&picbreite" heigth="(&picbreite * 3) div 4" suffix="_ttpic">
<strong style="float: left; margin: -10px 10px 0px 0;"><cc:printpicture obj="pic.grafik_ttpic" xhtml="1" width="&picbreite" height="(&picbreite * 3) div 4">
</strong>
</cc:if>
</cc:if>
<cc:*> AUSGABE TEXT / BILD RECHTS</cc:*>
<cc:if cond="&para.properties.tooltips.picture.grafik.position.number=4">
<cc:if cond="&para.properties.tooltips.picture.grafik.uid"><cc:set value="&para.properties.tooltips.picture.breite" obj="picbreite">
<cc:set value="(&picbreite div 2) - 10" obj="picbreite">
<cc:picture obj="pic.grafik" uid="&para.properties.tooltips.picture.grafik.uid" boxwidth="&picbreite" heigth="(&picbreite * 3) div 4" suffix="_ttpic">
<strong style="float: right; margin: -10px 0px 0px 10px;"><cc:printpicture obj="pic.grafik_ttpic" xhtml="1" width="&picbreite" height="(&picbreite * 3) div 4">
</strong>
</cc:if>
</cc:if>
<cc:*> TEXTAUSGABE bzw. ÜBERSCHRIFT</cc:*>
<cc:if cond="&para.properties.tooltips.picture.text OR &para.properties.tooltips.picture.caption">
<em style="color: <cc:print value="&para.properties.tooltips.picture.caption.color">;"><cc:print value="&para.properties.tooltips.picture.caption"></em><br /><br />
<cc:print value="&para.properties.tooltips.picture.text">
</cc:if>
<cc:*> BILDAUSGABE unterhalb TEXT</cc:*>
<cc:if cond="&para.properties.tooltips.picture.grafik.position.number=2">
<cc:if cond="&para.properties.tooltips.picture.grafik.uid"><cc:set value="&para.properties.tooltips.picture.breite" obj="picbreite">
<cc:picture obj="pic.grafik" uid="&para.properties.tooltips.picture.grafik.uid" boxwidth="&picbreite" heigth="(&picbreite * 3) div 4" suffix="_ttpic">
<cc:printpicture obj="pic.grafik_ttpic" xhtml="1" width="&picbreite" height="(&picbreite * 3) div 4">
</cc:if>
</cc:if>
</span></a></div></cc:if>
<cc:*>============= ENDE CSS Tooltip Funktion in CCML ======================= </cc:*>

CSS
================================================================================
6.) in der style_design.css, ergänzen:

/* CSS Tooltip */
div.tooltip, span.tooltip { /* span.tooltip für Textlink - sonst span.tooltip weglassen */
position:relative;
}
p span.tooltip {
line-height: 100%; /* Falls ein line-height im Design definiert ist für Textlink */
}

a.tthref, a.tthref:hover{
text-decoration: none!important;
cursor: help;
}

.tthref span.ttinfo {
display: none;
}
.tthref:hover span.ttinfo {
position: absolute;
display: inline-block;
padding: 20px;
z-index: 1001;
}
.tthref:hover span.ttinfo img{
margin: 10px 0;
}
.tthref:hover span.ttinfo img.full{
margin: 0;
overflow: hidden;
}
.tthref:hover span.ttinfo em{
font-size: 1.3em;
/* display: inline-block; IE7 Bug * in stylesheet IE6 ausgelagert */
}
/* Hintergrundfarbe Tooltip */
.black{
background: url(../assets/blackpx.png) repeat;
}
.blue{
background: url(../assets/bluepx.png) repeat;
}
.red{
background: url(../assets/redpx.png) repeat;
}
.green{
background: url(../assets/greenpx.png) repeat;
}
.orange{
background: url(../assets/orangepx.png) repeat;
}
.yellow{
background: url(../assets/yellowpx.png) repeat;
}
.white{
background: url(../assets/whitepx.png) repeat;
}
.gray{
background: url(../assets/graypx.png) repeat;
}
.purple{
background: url(../assets/purplepx.png) repeat;
}
.blauer_verlauf_vertikal{
background: url(../assets/bluevfv.png) repeat-x;
}
.roter_verlauf_vertikal{
background: url(../assets/redvfv.png) repeat-x;
}
.gruener_verlauf_vertikal{
background: url(../assets/greenvfv.png) repeat-x;
}
.lila_verlauf_vertikal{
background: url(../assets/purplevfv.png) repeat-x;
}
.oranger_verlauf_vertikal{
background: url(../assets/orangevfv.png) repeat-x;
}
.gelber_verlauf_vertikal{
background: url(../assets/yellowvfv.png) repeat-x;
}
.schwarzer_verlauf_vertikal{
background: url(../assets/blackvfv.png) repeat-x;
}
.grauer_verlauf_vertikal{
background: url(../assets/grayvfv.png) repeat-x;
}

/* Ende CSS Tooltip */


bong gai bong tai bng gai php plugin version web 9

Alle Zeitangaben in WEZ +2. Es ist jetzt 16:05 Uhr.
Website erstellt mit CMS Web to Date Version 6.0 - Data Becker
Website CO2 neutral hosted by Host Europe

Seite generiert in 0,07251 Sekunden.