Tooltips in der Website

Andere Lösungen
Post Reply
Gonzo Gates
Posts: 194
Joined: Thu 19. Jan 2023, 21:46

Tooltips in der Website

Post by Gonzo Gates »

Hallo Gemeinde,

ich hatte die Idee meine Site mit ein paar Tooltipps zu füttern.

Zur Veranschaulichung erstmal mein Ausgangsmaterial

Code: Select all

<!DOCTYPE html>
<html>
<!-- https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip1 
     http://apps.eky.hk/css-triangle-generator/
     https://www.w3schools.com/css/css_tooltip1.asp
     http://www.menucool.com/tooltip1/css-tooltip1
-->
<header>

<style>
body {
  font-family: arial, helvetica, sans;
  padding-top: 100px;
  
}
/*p {
  display: block;
  text-align: center;
  margin-left: 150px;
}*/

p {
  pointer: normal;

}

.ausrichtung {
  display:block;
  position: apsolute;
  margin: 10px auto 0px;
  padding-bottom: 15px; 
  width: 500px;
  border: 3px solid red;
}

.text_drehen { /* fuer '.tooltip5' */
  transform: rotate(180deg);
}
.btn {
  pointer: normal;
  margin: 0px auto;
}
  
.tooltip1 { /* hier frormatierung des dargestellten textes */
    display:inline-block;
    position:relative;
    margin: 0px auto 0px;
    padding-left: 25%; /* hinzugefuegt Einzug Text */
    width: 75%; /* hinzugefuegt, damit punkte-linie ausgedehnt wird. jetzt weden die tooltips ach angezeigt, wenn man mit der maus ueber das ausgedehnte element geht */
    border-bottom:1px dotted #666;
    text-align:left;
    /*text-align:middle;*/
    pointer: normal;
}

.tooltip1 .top {
    min-width:200px; 
    max-width:250px;
    top:0px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    border:1px solid #66FFFF;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden;
    opacity:0; 
    transition:opacity 0.8s; /* in tooltip5 umgewandelt: , transform 2s;  hinzugefüegt aus Ribbeck css .tooltip .tooltiptext-Theodor-Fontane. transform 2s dreht in 2 sekunden */
}

.tooltip1:hover .top {
    visibility:visible; 
    /* in tooltip5 umgewandelt: transform: rotate(180deg);  hinzugefüegt aus Ribbeck css .tooltip .tooltiptext-Theodor-Fontane. */
    opacity:1;
}

.tooltip1 .top i { /* Das Dreieck */
    position:absolute;
    top:100%;
    left:70%; /* von 50% auf 70% erhoeht und das Dreieck nach rechts verschoben */
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip1 .top i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#EEEEEE;
    border:1px solid #66FFFF;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

.tooltip2 { /* hier frormatierung des dargestellten textes */
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    padding-left: 25%; /* hinzugefuegt Einzug Text */
    width: 75%; /* hinzugefuegt, damit punkte-linie ausgedehnt wird. jetzt weden die tooltips ach angezeigt, wenn man mit der maus ueber das ausgedehnte element geht */
    text-align:left;
}

.tooltip2 .right {
    min-width:350px; /* tooltip breite von 200 auf 350 erhoeht */
    max-width:250;
    top:50%;
    left:73%; /* tooltip nach rechts oder links verschieben. wg. groesserem dreieck hoherer wert 72% -> 73% */
    margin-left:15px;
    transform:translate(0, -50%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    /*border:1px solid #660066;box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    border:1px solid rgba(255,99,71,1); /*tomato;  andere farbe */
    /*box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    box-shadow: 0px 15px 10px -10px lime inset, /* mit positiv y-achse kann die dicke der oberen linie geaendert werden */
                0px -15px 10px -10px turquoise inset; /* mit negativ y-achse kann die dicke der unteren linie geaendert werden */
    /*visibility:hidden; opacity:0; transition:opacity 0.8s;*/
    visibility:hidden; 
    opacity:0; 
    transition:opacity 4.8s; /* dauert laenger bei der einblendung */
}

.tooltip2:hover .right {
    visibility:visible; 
    opacity:1;
}

.tooltip2 .right i { /* Das Dreieck */
    position:absolute;
    top:50%;
    right:100%;
    margin-top:-12px;
    /*width:12px;*/
    width:20px; /* position Dreieck links und rechts. bei groessenaenderung dreieck verschieben. bei hoeherem wert sieht man, dass es ein 45° gedrehtes quadrat ist */
    height:24px; /* position Dreieck */
    overflow:hidden;
}

.tooltip2 .right i::after {
    content:'';
    position:absolute;
    /*width:12px; groesse dereieck geaendert*/
    width:20px;
    /*height:12px; groesse dereieck geaendert*/
    height:20px;
    left:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg);
    background-color:#EEEEEE;
    /*border:1px solid #660066;box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    border:1px solid rgba(255,99,71,1); /*tomato;  andere farbe */
    /*box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    box-shadow:inset 0 1px 6px rgba(0,0,255,1);
}

.tooltip3 { /* hier frormatierung des dargestellten textes */
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    padding-left: 25%; /* hinzugefuegt Einzug Text */
    width: 75%; /* hinzugefuegt, damit punkte-linie ausgedehnt wird. jetzt weden die tooltips ach angezeigt, wenn man mit der maus ueber das ausgedehnte element geht */
    text-align:left;
}

.tooltip3 .bottom {
    min-width:200px; 
    max-width:250;
    top:50px;
    left:50%;
    transform:translate(-50%, 0);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    border:1px solid #0000FF;box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; 
    opacity:0; 
    transition:opacity 0.8s;
}

.tooltip3:hover .bottom {
    visibility:
    visible; 
    opacity:1;
}

.tooltip3 .bottom i { /* Das Dreieck */
    position:absolute;
    bottom:100%;
    left:25%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip3 .bottom i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,50%) rotate(45deg);
    background-color:#EEEEEE;
    border:1px solid #0000FF;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

.tooltip4 { /* hier frormatierung des dargestellten textes */
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    padding-left: 25%; /* hinzugefuegt Einzug Text */
    width: 75%; /* hinzugefuegt, damit punkte-linie ausgedehnt wird. jetzt weden die tooltips ach angezeigt, wenn man mit der maus ueber das ausgedehnte element geht */
    text-align:left;
    pointer: normal;
}

.tooltip4 .left {
    min-width:330px; /* breite tooltip von 200 auf 330 erhoeht */ 
    max-width:250;
    top:50%;
    right:100%;
    margin-right: -105px; /* Je groesser der Einzug, desto geringer muss der Wert sein */
    transform:translate(0, -50%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    /*border:1px solid #FF6633;box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    border:1px solid lime; 
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    /*visibility:hidden; 
    opacity:0; 
    transition:opacity 3s;  von 0.8 auf 3s hochgedreht. dauert laenger bei der einblendung */
    visibility:hidden; 
    opacity:0; 
    transition:all 3s linear; /* von 0.8 auf 3s hochgedreht -> einfuegen 'transition: all 1s linear' (entnommen aus Ribbeck/css/cx_layout.css) -> jetzt einblenden und ausblenden gleiche zeit */
}

.tooltip4:hover .left {
    /*visibility:visible; opacity:1;*/
    visibility:visible; 
    opacity:0.85; /* dem jeht. det is jut! Nu is tooltip durchsichtig */
}

.tooltip4 .left i { /* Das Dreieck */
    position:absolute;
    top:50%;
    left:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}

.tooltip4 .left i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
    background-color:#EEEEEE;
    /*border:1px solid #FF6633;box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    border:1px solid lime;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

.tooltip5 { /* hinzugefuegt als kopie von '.tooltip1' -> hier frormatierung des dargestellten textes */
    display:inline-block;
    position:relative;
    margin: 0px auto 0px;
    padding-left: 25%; /* hinzugefuegt Einzug Text */
    width: 75%; /* hinzugefuegt, damit punkte-linie ausgedehnt wird. jetzt weden die tooltips ach angezeigt, wenn man mit der maus ueber das ausgedehnte element geht */
    border-bottom:1px dotted #666;
    text-align:left;
    /*text-align:middle;*/
    pointer: normal;
}

.tooltip5 .top2 {
    min-width:200px; 
    max-width:280px;
    top:50px; /* angepasst wg. drehung */
    left:25%; /* angepasst wg. drehung */
    transform:translate(-50%, -100%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    /*border-radius:8px;*/
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    border:1px solid violet; /* andere farbe */
    /*box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    box-shadow: inset 13px -5px 5px -10px rgba(119,119,119,1), /*#777,  schoener schatten innen links und rechts entnommen aus Ribbeck/css/ribbeck_layout.css -> tooltip */
                inset -13px 5px 5px -10px rgba(119,119,119,0.95); /*#777;*/
    visibility:hidden;
    opacity:0; 
    /*transition:all 3s linear;  von 0.8 auf 3s hochgedreht -> einfuegen 'transition: all 1s linear' (entnommen aus Ribbeck/css/cx_layout.css) -> jetzt einblenden und ausblenden gleiche zeit */
    transition:all 3s linear, transform 2s; /* hinzugefüegt aus Ribbeck css .tooltip .tooltiptext-Theodor-Fontane. transform 2s dreht in 2 sekunden */
}

.tooltip5:hover .top2 {
    visibility:visible; 
    transform: rotate(180deg); /* hinzugefüegt aus Ribbeck css .tooltip .tooltiptext-Theodor-Fontane. hier wird jetzt mal alles auf den kopf gestellt */
    opacity:1;
}

.tooltip5 .top2 i { /* Das Dreieck */
    position:absolute;
    top:100%;
    left:70%; /* von 50% auf 70% erhoeht und das Dreieck nach rechts verschoben */
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip5 .top2 i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#EEEEEE;
    border:1px solid violet; /* andere farbe */
    /*box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    box-shadow: inset 0 1px 4px rgba(119,119,119,0.9); /* schatten nach innen versetzt. letzten Wert von 8px auf 4px reduziert */
}

</style>
</header>
<body>
<h1 class="ausrichtung">Eine neue Variante von Tooltip</h1>
<div class="ausrichtung">
<div class="btn btn-primary tooltip1" style="/*text-align:right; das haut auch in den tooltip rein */"><p>Hover Me to Preview top tooltip</p>
    <div class="top">
        <h3>Lorem Ipsum eins</h3>
        <p>Bavarian Dolor sit amet, consectetur adipiscing elit. Dreieck nach rechts verschoben.</p>
        <i></i>
    </div>
</div>
<br>
<div class="btn btn-primary tooltip2"><p>Hover Me to Preview right tooltip</p>
    <div class="right">
        <h3>Lorem Ipsum zwei</h3>
        <p>Dolor sit amet, consectetur adipiscing elit. Hab mehr Zeit als 'left tooltip' mich einzublenden...Ich habe jetzt Schatten innen und das vergr&ouml;&szlig;erte Dreieck auch.</p>
        <i></i>
    </div>
</div>
<br>
<div class="btn btn-primary tooltip3"><p>Hover Me to Preview bottom tooltip</p>
    <div class="bottom">
        <h3>Lorem Ipsum drei</h3>
        <p>Dolor sit amet, consectetur adipiscing elit. Dreieck nach links verschoben.</p>
        <i></i>
    </div>
</div>
<br>
<div class="btn btn-primary tooltip4"><p>Hover Me to Preview left tooltip</p>
    <div class="left">
        <h3>Lorem Ipsum vier</h3>
        <p>Dolor sit amet, consectetur adipiscing elit.Hab mehr Zeit mich ein- und auszublenden...und bin auch noch durchscheinend.</p>
        <i></i>
    </div>
</div>
<br>
<div class="btn btn-primary tooltip5" style="/*text-align:right; das haut auch in den tooltip rein */"><p>Hover Me to Preview top tooltip with screwing</p>
    <div class="top2 text_drehen">
        <!-- reienfolge ueberschrift und text vertauscht, da alles um 180° gedreht wird -->
        <p class="text_drehen">Bavarian Dolor sit amet, consectetur adipiscing elit. Ich habe jetzt Schatten innen und das kleine Dreieck auch. Au&szlig;erdem kann ich mich drehn!</p>
        <h3 class="text_drehen">Lorem Ipsum f&uuml;nf mit Drehung</h3>
        <i></i>
    </div>
</div>
</div>

</body>
Wenn ihr aus dem Code eine *.html-Datei abspeichert und aufruft, seht ihr, was ich meine.

Daraus kann man sich das CSS heraus kopieren und in die eigene Site integrieren (reimt sich). Über Tiny muss der entsprechende Absatz oder das Bild mit den Klassen vorbereitet werden. In der 'CMSroot/templates/[templatename]/stylsheet.css' wird dann der Code für den Tooltip eingefügt und je nach Gusto angepasst. Natürlich geht auch eine separate CSS-Datei, wie bei mir.

Ich empfehle, aus eigenem Missgeschick, eine separate Testumgebung für die Änderungen am CMSimple.

Als Beispiel meiner Einbindung des Codes:

'CMSroot/css/dor_styles.css' (Wird in 'CMSroot/templates/[templatename]/template.htm' eingebunden)

Code: Select all

/*#############################################

  Tooltip fuer 'Keine Ahnung'-Bild

##############################################*/

.btn {
  pointer: normal;
  /*margin: 0px auto; Auskommentiert wg. 'dor_left_border_rzpt_nohover'. Bild soll ja linksbuendig sein. */ 
  width: 143px!important; /* Wenn der Eintrag fehlt, dann 'rutscht' der Tooltip nach rechts */
}

.tooltip_hinweis { /* hier frormatierung des dargestellten textes */
    display:inline-block;
    position:relative;
    /*padding-left: 25%;  hinzugefuegt Einzug Text */
    text-align:left;
}

.tooltip_hinweis .right { /* Tooltip Textbox */
    min-width:350px; /* tooltip breite von 200 auf 350 erhoeht */
    max-width:250;
    top:50%;
    left:108%; /* tooltip nach rechts oder links verschieben. wg. groesserem dreieck hoherer */
    margin-left:15px;
    transform:translate(0, -50%);
    padding:10px 20px;
    color:rgba(68,68,68,.85) /* #444 */;
    background-color:rgba(238,238,238,.4) /* #eee */;
    font-weight:normal;
    font-size:13px;
    border-radius: 0 33px 33px 0; /* DOR rounded corners rechts */
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    /*border:1px solid #660066;box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    border: 1px solid rgba(153, 51, 00, 1); /* #930 */
    /*box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    box-shadow: inset 0px 0px 4px rgba(153, 51, 00, 1); /* #930 */
    /*visibility:hidden; opacity:0; transition:opacity 0.8s;*/
    visibility:hidden; 
    opacity:0; 
    /*transition:opacity 4.8s;  dauert laenger bei der einblendung */
    transition:all 1.5s linear; /* von 0.8 auf 1.5s hochgedreht -> jetzt einblenden und ausblenden gleiche zeit */
}

.tooltip_hinweis:hover .right {
    visibility:visible; 
    opacity:1;
}

.tooltip_hinweis .right i { /* Das Dreieck */
    position:absolute;
    top:50%;
    right:100%;
    margin-top:-12px;
    /*width:12px;*/
    width:20px; /* position Dreieck links und rechts. bei groessenaenderung dreieck verschieben. bei hoeherem wert sieht man, dass es ein 45° gedrehtes quadrat ist */
    height:24px; /* position Dreieck */
    overflow:hidden;
}

.tooltip_hinweis .right i::after {
    content:'';
    position:absolute;
    /*width:12px; groesse dereieck geaendert*/
    width:20px;
    /*height:12px; groesse dereieck geaendert*/
    height:20px;
    left:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg);
    background-color:rgba(238,238,238,.4) /* #eee */;
    /*border:1px solid #660066;box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    border: 1px solid rgba(153, 51, 00, 1); /* #930 */
    /*box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    box-shadow: inset 0px 0px 4px rgba(153, 51, 00, 1);
}
In der Seite wird ein Bild eingebunden, hier mit einem Style versehen, der es links ausrichtet und drumherum der Tooltip gebaut. Der Dateipfad für die Grafik muss abgepasst werden. Hier befindet er sich in einer Subsite.

Code: Select all

<div class="btn tooltip_hinweis">
<p style="width: 333px; height: 143px;"><img class="dor_left_border_rzpt_nohover" title="Keine Ahnung" src="../userfiles/images/question-mark.png" alt="" width="143" height="143"></p>
<div class="right">
<h3>Keine Ahnung, was hier hin soll!</h3>
<i></i></div>
</div>
Das Problem bei diesem Konstrukt bei einer 143 x 143px Grafik (Eigendlich ist der Code nur für Text gedacht) ist, dass ich mit folgenden Krücken arbeiten musste

CSS

Code: Select all

.btn {
  width: 143px!important; /* Wenn der Eintrag fehlt, dann 'rutscht' der Tooltip nach rechts */
}

.tooltip_hinweis .right { /* Tooltip Textbox */
    left:108%;
}
Seitenquelltext (333px, damit die Grafik in der Breite annähernd richtig dargestellt wird [ich fand 333 kuul ;-) Preisfrage: Warum gab es nie einen 666 MHz Prozessor?])

Code: Select all

<p style="width: 333px; height: 143px;"><img class="dor_left_border_rzpt_nohover" title="Keine Ahnung" src="../userfiles/images/question-mark.png" alt="" width="143" height="143"></p>
Wenn es jemand besser weiß: Her damit.

Ach ja, Meine Site (http://dorilaraukft.bplaced.net/sites/C ... zepte_0-3/), auf der man es sehen kann ist 1. lahm und 2. nur noch bis 10. 10. erreichbar.

Gruß
Gonzo
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Top
Gonzo Gates
Posts: 194
Joined: Thu 19. Jan 2023, 21:46

Re: Tooltips in der Website

Post by Gonzo Gates »

Hallo Gemeinde,

New Balls!

Bin nochmal in mich gegangen, weil es mir doch nicht so gut gefiel, wie der Tooltip aussah. Jetzt ist die linke Ecke am Tooltip besser integriert, so dass sich an der Ecke keine vertikale Linie anzeigt, die die Ecke visuell abtrennt.

Der Eintrag am p-Tag 'style="width: 333px; height: 143px;"' ist in eine Klasse gewandert und wird im p-Tag mit 'class="grafik_dehnen_ka"' aufgerufen

Styles mit geänderten Namen (ka = Keine Ahnung) jetzt in 'CMSroot/css/dor_tooltip.css'.

Code: Select all

/*#############################################

  Tooltip fuer 'Keine Ahnung'-Bild

##############################################*/

.grafik_dehnen_ka { /* Grafik 'Keine Ahnung' wird in der Vorschau vertikal und horizontal zusammengedrückt, wenn diese Klasse nicht vorhanden ist. Wird im p-Tag eingebunden */
  width: 333px; /* Wert musste groesser genacht werden, damit es passt -> KA warum */
  height: 143px;
}

.btn {
  pointer: normal;
  /*margin: 0px auto; Auskommentiert wg. 'dor_left_border_rzpt_nohover'. Bild soll ja linksbuendig sein. */ 
  width: 143px!important; /* Wenn der Eintrag fehlt, dann 'rutscht' der Tooltip nach rechts */
}

.tooltip_ka { /* hier frormatierung des dargestellten textes */
    display:inline-block;
    position:relative;
    /*border-bottom:1px dotted #666;
    padding-left: 25%; /* hinzugefuegt Einzug Text */
    /*width: 75%;  hinzugefuegt, damit punkte-linie ausgedehnt wird. jetzt weden die tooltips ach angezeigt, wenn man mit der maus ueber das ausgedehnte element geht */
    text-align:left;
}

.tooltip_ka .right { /* Tooltip Textbox */
    min-width:350px; /* tooltip breite von 200 auf 350 erhoeht */
    max-width:250;
    top:50%; 
    left:108%; /* tooltip nach rechts oder links verschieben. wg. groesserem dreieck hoherer wert 72% -> 73% */
    margin-left:15px;
    transform:translate(0, -55%); /* Wert von 50 auf 55 geaendert um Toooltip etwas nach oben zu schubsen */
    padding:10px 20px;
    color:#444444;
    /*background-color:#EEEEEE;*/
    background-color:rgba(238,238,238,.4) /* #eee */;
    font-weight:normal;
    font-size:13px;
    font-variant:small-caps; /* Kleine Schriftzeichen werden gross geschrieben */
    /*border-radius:8px;*/
    border-radius: 0 33px 33px 0; /* DOR rounded corners rechts */
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    /*border:1px solid #660066;box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    /*border:1px solid rgba(255,99,71,1); tomato;  andere farbe */
    border: 2px solid rgba(153, 51, 00, .7); /* #930 */
    /*box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    /*box-shadow: 0px 15px 10px -10px lime inset, mit positiv y-achse kann die dicke der oberen linie geaendert werden */
    /*            0px -15px 10px -10px turquoise inset;  mit negativ y-achse kann die dicke der unteren linie geaendert werden */
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    /* box-shadow: inset 0px 0px 4px rgba(153, 51, 00, 1); #930*/
    /*visibility:hidden; opacity:0; transition:opacity 0.8s;*/
    visibility:hidden; 
    opacity:0; 
    /*transition:opacity 4.8s;  dauert laenger bei der einblendung */
    transition:all 1.5s linear; /* von 0.8 auf 1.5s hochgedreht -> jetzt einblenden und ausblenden gleiche zeit */
}

.tooltip_ka:hover .right {
    visibility:visible; 
    opacity:1;
}

.tooltip_ka .right i { /* Das Dreieck */
    position:absolute;
    top:50%;
    right:100%;
    margin-top:-12px;
    /*width:12px;*/
    width:20px; /* position Dreieck links und rechts. bei groessenaenderung dreieck verschieben. bei hoeherem wert sieht man, dass es ein 45° gedrehtes quadrat ist */
    height:24px; /* position Dreieck */
    overflow:hidden;
}

.tooltip_ka .right i::after {
    content:'';
    position:absolute;
    /*width:12px; groesse dereieck geaendert*/
    width:20px;
    /*height:12px; groesse dereieck geaendert*/
    height:20px;
    left:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg);
    background-color:rgba(238,238,238,1) /* #eee */;
    /*border:1px solid #660066;box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    /*border:1px solid rgba(255,99,71,1); tomato;  andere farbe */
    /*box-shadow:0 1px 8px rgba(0,0,0,0.5);*/
    border: 2px solid rgba(153, 51, 00, .7); /* #930 */
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}
, damit der Tooltip in Tiny angezeigt wird und es erscheint auch nicht mehr der Tooltip-Text. Dazu die Datei mit

Code: Select all

@import url(../../css/dor_tooltip.css);
in die CSS-Datei 'CMSroot/templates/[templatename]/stylsheet.css' integriert.

Hier der geänderte Eintrag in der Seite

Code: Select all

<div class="btn tooltip_ka">
<p class="grafik_dehnen_ka"><img class="dor_left_border_rzpt_nohover" title="Keine Ahnung" src="userfiles/images/question-mark.png" alt="" width="143" height="143"></p>
<div class="right">
<h3>Keine Ahnung, was hier hin soll!</h3>
<i></i></div>
</div>
Das Ding ist ganz bestimmt nicht ausgereift und kann vielleicht besser bei Text (Überschriften?), als bei Grafiken, wie bei mir, besser angewendet werden. Müsst ihr ausprobieren. Der Tooltip muss auch nicht zwingend rechts erscheinen (siehe Ausgangsmaterial oben).

Der neue Tooltip ist bis 10.10. unter http://dorilaraukft.bplaced.net/sites/C ... zepte_0-3/ zu sehen

Was ich vergessen hatte: Im Tooltip-Text können Links und Grafiken/Bilder eingebunden werden.

Nochmal: Wenn es jemand besser weiß: Her damit.

Gruß
Gonzo
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Top
Post Reply

Return to “Other Solutions”