Platzhalter in Seite mit Grafik und Tooltip

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

Platzhalter in Seite mit Grafik und Tooltip

Post by Gonzo Gates »

Hallo Gemeinde,

wen es interessiert:

In den Seiten, bei denen ich noch nicht weiß, was dort hinein soll, habe ich eine Grafik mit einem Tooltip eingebaut. Ich fand 'Lorem Ipsum' zu langweilig.

Die Grafik ist links ausgerichtet und der Tooltip wird rechts eingeblendet

HTML (Füge ich immer in Tiny im Quelltext unter der Überschrift ein)

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>
CSS Tooltip (Ich habe meine auskommentierten Versuche drin gelassen [Kann in 'CMSroot/templates/[Templatename]/stylesheet.css' eingefügt werden])

Code: Select all

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

  Tooltip fuer 'Keine Ahnung'-Grafik

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

.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'. Grafik 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 werden die tooltips auch 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:rgba(68,68,68,1) /* #444 */;
    /*background-color:#EEEEEE;*/
    background-color:rgba(238,238,238,.85) /* #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: /*6px 3px 1px 6px rgba(0,0,0,0.5); Urspruenglicher Schatten Textfeld */
                /*15px 2px 15px -15px yellow ,  unten rechts */
                /*0px -20px 20px -13px blue ,  oben */
                /*15px -2px 10px -15px lime ,  oben rechts */
                /*0px 10px 10px -10px red ;  unten */
                /* Schatten nicht oberhalb des Textfeldes */
                10px 12px 15px -15px rgba(68,68,68,0.7) ,  /*unten rechts */
                /*0px -20px 20px -13px rgba68,68,68,0.7) ,  oben */
                16px -2px 11px -15px rgba(68,68,68,0.7) , /* oben rechts */
                0px 12px 10px -10px rgba(68,68,68,0.7) ; /* unten */
    /* box-shadow: inset 0px 0px 4px rgba(153, 51, 00, 1); #930*/
    /*visibility:hidden; opacity:0; transition:opacity 0.8s; depr*/
    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); /* Das Qadrat (!!!) wird links harum gedreht */
    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, .85); /* #930 - inset entfernt und streuung gr”oesser */
    /*box-shadow: 0 1px 6px rgba(0,0,0,0.5); Urspruenglicher innerer Schatten 'Dreieck' 'inset' */
    box-shadow: 0px 4px 4px 2px rgba(68,68,68,0.7); /* Schatten nur an einer Seite des Quadrates */
                /*-2px 0 6px  -6px blue,
                0px 2px 6px green,
                0 0px 0px yellow;*/
                 /*-25px 12px 15px -15px yellow ,  rechts */
                  /*0px -20px 20px -13px blue ,  unten */
                  /*25px -10px 10px -15px lime ,  links */
                  /*0px 20px 10px -10px red ;  oben */
}
CSS Ausrichtung Grafik [Kann in 'CMSroot/templates/[Templatename]/stylesheet.css' eingefügt werden]

Code: Select all

img.dor_left_border_rzpt_nohover {display: block; background: transparent; float: left; max-width: 44%; border: 1px solid rgba(170,170,170,1); border-radius: 0 18px 18px 0; padding: 6px; margin: 5px 20px 16px 0px; box-shadow: inset 1px 0px 3px rgba(170,170,170,1), inset 0px 1px 3px rgba(170,170,170,1), inset -1px 0px 3px rgba(170,170,170,1), inset 0px -1px 3px rgba(170,170,170,1);} /* DOR: hinzugefuegt Kopie von 'img.tplge_right_border' mit 'box-shadow - inset', margin-top auf 5px erhoeht und hier kein hover-effekt bei mouseover() */
Könnte man auch damit machen [Kann in 'CMSroot/templates/[Templatename]/stylesheet.css' eingefügt werden]

Code: Select all

img.dor_left_border_rzpt {display: block; background: transparent; float: left; max-width: 44%; border: 1px solid rgba(170,170,170,1); border-radius: 0 18px 18px 0; padding: 6px; margin: 5px 20px 16px 0px; box-shadow: inset 1px 0px 3px rgba(170,170,170,1), inset 0px 1px 3px rgba(170,170,170,1), inset -1px 0px 3px rgba(170,170,170,1), inset 0px -1px 3px rgba(170,170,170,1);} /* DOR: hinzugefuegt Kopie von 'img.tplge_right_border' mit 'box-shadow - inset', margin-top auf 5px erhoeht */
img.dor_left_border_rzpt:hover {opacity: 0.85;} /* DOR: hinzugefuegt, uebernommen aus "\Test\Blindtexte_spielwiese_modal_popup_neu\css\modal_popup_blindtext.css"*/
Möglich ist auch die Styles in einer Datei, z.B. 'CMSroot/css/tooltip.css', zu speichern und sie in 'CMSroot/templates/[Templatename]/stylesheet.css' mit '@import url(../../css/tooltip.css);' importieren. Der Ordner 'CMSroot/css/' muss natürlich vorher erstellt werden ;-)

Die Seite http://www.menucool.com/tooltip/css-tooltip, von der ich den Tooltip habe, ist ein Tooltip-Generator. Ich habe eine Tooltip-Konserve http://dorilaraukft.bplaced.net/sites/Tooltips/ mit verschiedenen Tooltip Ausrichtungen angelegt und diese auch noch mit Farbspielereien, Zeit einblenden, Zeit ausblenden und Drehung erweitert. Die eigendliche Seite hat Tooltips für Text, aber ich habe es auf eine Grafik umgebaut. Hat aber einen kleinen Schönheitsfehler (CSS: .grafik_dehnen_ka), damit der Tooltip-Abstand zur Grafik passt. Vielleicht hat einer eine Idee, wie es besser geht.

Auf meiner Hidden-Site kann man sich meinen erwähnten Tooltip anschauen. http://dorilaraukft.bplaced.net/sites/C ... ine_Ahnung

@Gert: Vielleicht wäre es etwas für das Collections Plugin? Ich bin drauf und dran in meine 'CMSroot/cmsimple/Userfuncs.php' eine Funktion für den Tooltip zusammen zu bauen, in der er paramtrisiert wird. So eine Funktion habe ich auch schon mit meinen Grafiken, die modal per JS irgendwie erscheinen sollen, geschaffen.

Code: Select all

function ModalPopup($PopupBildJS = 'veltinstag.jpg',$BildAusrichtung = 'Rechts',$BildTitel = 'R.I.P Lemmy', $Zaehler = 0, $Modus = 0, $CloseButtonText1 = 'Zumachen', $CloseButtonText2 = 'Wech Machen', $ZeitBisBildWeg = 3500)
Am alle anderen: Viel Spaß beim Basteln. Ich finde es kuul

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

Return to “Other Solutions”