Joomla 3.8.x Tooltip Problem mit Artisteer Template. Los werden oder modifizieren!

Instruktion:

Dies begann mit Joomla 3.8.x im Frontend mit Artisteer Templates. Plötzlich werden Tooltips im Frontend mit einem schlechten Design angezeigt, da die Klassen in der Artisteer-Vorlage nicht vorhanden sind. Sieht sehr merkwürdig aus auf den PREV und NEXT Seiten-Schaltknöpfen in Artikeln zum Beispiel.

Um zum alten Designstil zurückzukehren, bedeutet keine Tooltips, machen Sie folgendes:
Kopieren Sie die Abschnitte der Klassen aus der template.css von Protostar, beginnend mit ".tooltip, .tip, .popover".
ACHTUNG: Einige Klassen kommen mehrfach vor mit anderen Einstellungen.

Jetzt sind die Klassen da und arbeiten wie in Protostar, indem sie eine Box mit Rahmen und Text in weiß auf weiß zeigen (sieht aus wie eine leere Box).

Führen Sie nun eine zusätzliche Modifikation in der Klasse .tip-wrap durch:
--> Zeile innerhalb der Klasse hinzufügen --> "visibility: hidden;".

Jetzt sind alle Tooltips im Frontend verschwunden! Sieht aus wie vor Joomla 3.8.x mit Ihrem Artisteer Template.

Und wenn Ihnen die Tooltips gefallen, können Sie sie jetzt modifizieren, um sie bei Bedarf an Ihr Template Design anzupassen und "visibility: visible;" einstellen, um sie wieder zu sehen!

 

Link to code sample:

https://iwoxx.com/images/public/software/joomla/artisteer/css/Artisteer_CSS_Options_Customer.css 

 

Code in clear text:

/**********************************************************************************/
/*** Added by Dieter Woellner (https://IWOXX.com) to avoid tooltip issues ***/
/*** to Artisteer CSS options (customer.css) - 13.12.2017 ***/
/*** -------------------------------------------------------------------------- ***/
/*** This started with Joomla 3.8.x in frontend with Artisteer templates. ***/
/*** Suddenly tooltips are shown in frontend with a bad design, as the classes ***/
/*** are not there in the Artisteer template. Looks very strange on the PREV ***/
/*** and NEXT pagination buttons in articles for example. ***/
/*** To get back to old fashion style, means no tooltips, do the following: ***/
/*** Copy the sections of classes from Protostar's template.css starting with ***/
/*** ".tooltip, .tip, .popover" ***/
/*** ATTENTION: Some are doubled down the line with other settings ***/
/*** ***/
/*** Now the classes are there and working like in protostar showing up a box ***/
/*** with border and text in white on white (looks like an emtpy box). ***/
/*** Now do an additional modification in class .tip-wrap: ***/
/*** --> Add line inside the class --> "visibility: hidden;" ***/
/*** ***/
/*** Now all tooltips are gone in frontend! ***/
/*** Looks like before Joomla 3.8.x with your Artisteer template ***/
/*** ***/
/*** And if you like the tooltips you can now modify to align it with your ***/
/** template design if needed and set "visibility: visible;" to view it again! ***/
/*** ***/
/**********************************************************************************/

// Label control
.control-label .hasPopover,
.control-label .hasTooltip {
display: inline-block;
}

// Handle tooltips
.tooltip {
position: absolute;
z-index: 1030;
display: block;
visibility: visible;
font-size: 11px;
line-height: 1.4;
opacity: 0;
filter: alpha(opacity=0);
}
.tooltip.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.tooltip.top {
margin-top: -3px;
padding: 5px 0;
}
.tooltip.right {
margin-left: 3px;
padding: 0 5px;
}
.tooltip.bottom {
margin-top: 3px;
padding: 5px 0;
}
.tooltip.left {
margin-left: -3px;
padding: 0 5px;
}
.tooltip-inner {
max-width: 200px;
padding: 8px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}

.tooltip {
max-width: 400px;
}
.tooltip-inner {
max-width: none;
text-align: left;
text-shadow: none;
}
th .tooltip-inner {
font-weight: normal;
}
.tooltip.hasimage {
opacity: 1;
}
.tip-text {
text-align: left;
}

.tip-wrap {
visibility: hidden;
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
z-index: 100;
}

// Control popover
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
text-align: left;
background-color: #fff;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
white-space: normal;
}
.popover.top {
margin-top: -10px;
}
.popover.right {
margin-left: 10px;
}
.popover.bottom {
margin-top: 10px;
}
.popover.left {
margin-left: -10px;
}
.popover-title {
margin: 0;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.popover-title:empty {
display: none;
}
.popover-content {
padding: 9px 14px;
}
.popover .arrow,
.popover .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover .arrow {
border-width: 11px;
}
.popover .arrow:after {
border-width: 10px;
content: "";
}
.popover.top .arrow {
left: 50%;
margin-left: -11px;
border-bottom-width: 0;
border-top-color: #999;
border-top-color: rgba(0,0,0,0.25);
bottom: -11px;
}
.popover.top .arrow:after {
bottom: 1px;
margin-left: -10px;
border-bottom-width: 0;
border-top-color: #fff;
}
.popover.right .arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-left-width: 0;
border-right-color: #999;
border-right-color: rgba(0,0,0,0.25);
}
.popover.right .arrow:after {
left: 1px;
bottom: -10px;
border-left-width: 0;
border-right-color: #fff;
}
.popover.bottom .arrow {
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999;
border-bottom-color: rgba(0,0,0,0.25);
top: -11px;
}
.popover.bottom .arrow:after {
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #fff;
}
.popover.left .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999;
border-left-color: rgba(0,0,0,0.25);
}
.popover.left .arrow:after {
right: 1px;
border-right-width: 0;
border-left-color: #fff;
bottom: -10px;
}