Joomla 3.8.x Tooltip Issues with Artisteer template. Get rid of or modify!
Instruction:
This started with Joomla 3.8. x in the frontend with Artisteer templates. Suddenly tooltips are displayed in the frontend with a bad design, because the classes are not available in the Artisteer template. Looks very strange on the PREV and NEXT side buttons in articles for example.
To return to the old design style does not mean tooltips, do the following:
Copy the sections of the classes from the template. css of Protostar, starting with ". tooltip,. tip,. popover".
ATTENTION: Some classes occur several times with different settings.
Now the classes are there and work like in Protostar, showing a box with frame and text in white on white (looks like an empty box).
Make an additional modification to the. tip-wrap class:
Add a line within the class --> "visibility: hidden;".
Now all tooltips in the frontend are gone! Looks like before Joomla 3.8. x with your Artisteer template.
And if you like the tooltips, you can now modify them to suit your template design and adjust visibility: visible; to see them again!
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;
}