Tooltips not working correctly in 2.4

[Mintux]

Hello, in 2.4 branch the tooltips don't have any background. It seems something is broken here.

It's happening in every 2.4 instance. See the demo: https://dev.cachethq.io/ In 2.3 everything is working as expected, see: https://demo.cachethq.io/

Just hover over the parts where you could see the tooltip overlay. Any quick fix possible? I tried to search this up myself but didn't find the right parts.

[welcome[bot]]

:wave: Thank you for opening your first issue. I'm just an automated bot that's here to help you get the information you need quicker, so please ignore this message if it doesn't apply to your issue. If you're looking for support, you should try the Slack group by registering your email address at https://cachethq-slack.herokuapp.com. Alternatively, email support@alt-three.com for our Professional support service (please note, this a paid service.) If you're issue is with documentation, you can suggest edits by clicking the Suggest Edits link on any page, or open an issue at https://github.com/CachetHQ/Docs

[Mintux]

Hello again,

I checked the css from the latest 2.3 demo with the current 2.4 demo and my own installation and found the problem with the tooltips not showing correctly. It seems that some important css rules were removed in 2.4.

Quick fix for any 2.4 installation:

Just import the missing rules back via your custom style in the dashboard:

/* Missing Tooltip Rules */

body.status-page .tooltip .tooltip-inner {
 padding:8px 12px;
 font-size:14px;
 word-wrap:break-word;
}

.tooltip-inner {
 max-width:200px;
 padding:3px 8px;
 color:#fff;
 text-align:center;
 background-color:#333;
 border-radius:3px;
}

.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:#333;
}

.tooltip.top-left .tooltip-arrow {
 right:5px;
}

.tooltip.top-right .tooltip-arrow {
 left:5px;
}

.tooltip.right .tooltip-arrow {
 top:50%;
 left:0;
 margin-top:-5px;
 border-width:5px 5px 5px 0;
 border-right-color:#333;
}

.tooltip.left .tooltip-arrow {
 top:50%;
 right:0;
 margin-top:-5px;
 border-width:5px 0 5px 5px;
 border-left-color:#333;
}

.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
 border-width:0 5px 5px;
 border-bottom-color:#333;
 top:0;
}

.tooltip.bottom .tooltip-arrow {
 left:50%;
 margin-left:-5px;
}

.tooltip.bottom-left .tooltip-arrow {
 right:5px;
 margin-top:-5px;
}

.tooltip.bottom-right .tooltip-arrow {
 left:5px;
 margin-top:-5px;
}

If someone from the team could check this and fix this in the 2.4 branch, it would be fixed for everyone and the fixing part in the custom style area can be removed.

At users: Please don't edit sourcefiles. Wait for a real fix and until then, just use the custom style if you have the same problems. The tooltip will be shown as expected again.

Kind regards.

[duysmil]

Hello again,

I checked the css from the latest 2.3 demo with the current 2.4 demo and my own installation and found the problem with the tooltips not showing correctly. It seems that some important css rules were removed in 2.4.

Quick fix for any 2.4 installation:

Just import the missing rules back via your custom style in the dashboard:

/* Missing Tooltip Rules */

body.status-page .tooltip .tooltip-inner {
 padding:8px 12px;
 font-size:14px;
 word-wrap:break-word;
}

.tooltip-inner {
 max-width:200px;
 padding:3px 8px;
 color:#fff;
 text-align:center;
 background-color:#333;
 border-radius:3px;
}

.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:#333;
}

.tooltip.top-left .tooltip-arrow {
 right:5px;
}

.tooltip.top-right .tooltip-arrow {
 left:5px;
}

.tooltip.right .tooltip-arrow {
 top:50%;
 left:0;
 margin-top:-5px;
 border-width:5px 5px 5px 0;
 border-right-color:#333;
}

.tooltip.left .tooltip-arrow {
 top:50%;
 right:0;
 margin-top:-5px;
 border-width:5px 0 5px 5px;
 border-left-color:#333;
}

.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
 border-width:0 5px 5px;
 border-bottom-color:#333;
 top:0;
}

.tooltip.bottom .tooltip-arrow {
 left:50%;
 margin-left:-5px;
}

.tooltip.bottom-left .tooltip-arrow {
 right:5px;
 margin-top:-5px;
}

.tooltip.bottom-right .tooltip-arrow {
 left:5px;
 margin-top:-5px;
}

If someone from the team could check this and fix this in the 2.4 branch, it would be fixed for everyone and the fixing part in the custom style area can be removed.

At users: Please don't edit sourcefiles. Wait for a real fix and until then, just use the custom style if you have the same problems. The tooltip will be shown as expected again.

Kind regards.

Hello,

Don´t work for me :-(

[Mintux]

@duysmil

Hey! Did you check if the rest of the tooltip rules is correctly in place in your app.css? You can use the developer tools of your browser to check for the classes. You can compare the rules with the working installation of the 2.3 demo and recheck everything.

Maybe you have more missing rules in your 2.4 installation.

Another solution would be, to check for all 2.3 demo tooltip rules in the css file of the demo, copy them and import them as custom css in your 2.4 dashboard. In this case you would be safe to import all rules. I would suggest you search for tooltip.

Do you have the current 2.4 installation with the latest commit and the missing rules correctly applied via custom css in the dashboard? If you want, you could send me the link and I will debug this for you when I have some time.

Kind regards.

[mscalessio]

Hi guys, the problem is that small line of code https://github.com/CachetHQ/Cachet/blob/2.4/webpack.mix.js#L24 .purgeCss() Purge all the css that isn't in the html, so, the tooltip rules from bootstrap are stripped out. You could simply disable this line in webpack.mix.js and re-run yarn prod.

[nijel]

Thanks, adding the CSS manually worked for me as workaround (see https://github.com/WeblateOrg/Cachet/commit/346aa7bb3b7e80beabc9480c1f62d4f2c3301187).

[jbrooksuk]

Thank you for your input on Cachet 2.x. We are shifting our attention and resources to Cachet 3.x and will no longer be supporting the 2.x version. If your feedback or issue is relevant to the 3.x series, we encourage you to engage with the new branch.

For more information on the Cachet rebuild and our plans for 3.x, you can read the announcement here.

We appreciate your understanding and look forward to your contributions to the new version.