Red cross by using warningtext as="hover"

When typing:
{% ic %}{::warningtext as=“hover”}Hover warningtext{:/warningtext}{% endic %}
a red cross appears at the bottom right. This code is correct and works. If I then make a mistake later on, the green tick or red cross disappears. It would be nice if the red cross disappeared when the code is correct. This only happens when using {::warningtext as=“hover”}.

Hi @MDomburg !

We’ve rolled out updates to our Liquid banner and icon components to align them with Silverfin’s platform standards and enhance overall consistency.

What’s changed:

  • Updated styling for all three variants: hover/icon, inline, and in-page/block.

  • Introduced a new yellow (warning) state available across all variants.

  • Refined colour usage and text colours for improved clarity and consistency.

Why it matters:
These updates enhance visual consistency across Liquid and the broader Silverfin platform, while also providing clearer, more distinguishable warning and error states.

Before/after screenshot:

We’ve deprecated the warning hover icon to encourage template writers to use the most appropriate option based on context: the unreconciled red triangle for errors, or the newly introduced yellow circle for cautions.

Normally, you should have received an update regarding this change :slight_smile:

Kind regards!

Delphine

Hi Delphine,

Thanks for sharing the update. I’m still a bit unclear on the practical impact for template writers, because the update doesn’t mention any Liquid codes, nor does it explicitly state which Liquid snippets have become deprecated/unsupported.

Also, the update seems to be specifically about icons/components (Liquid banner and icon components), rather than the {::...text as="hover"} tags we use in templates.

In fact, the developer docs still show that warningtext can be used (including the hover variant):

Separately: when typing
{% ic %}{::warningtext as=“hover”}Hover warningtext{:/warningtext}{% endic %}
the code renders correctly, but the editor shows a red cross in the bottom-right and the green tick/red cross state behaves inconsistently afterwards. This looks like a linter false positive / bug, rather than invalid Liquid.

If warningtext as="hover" is no longer recommended or allowed, it’s not clear what the correct alternative hover should be (and which Liquid code we should use instead) to keep a distinct warning hover.

In our template we intentionally have two different hovers next to the unreconciled indicator:

  • an info icon hover to explain when the red triangle changes into a green circle (i.e., what that status change means),

  • a warning icon hover to indicate that something in the workflow was executed incorrectly and needs to be fixed first.

That’s why we need two different hover messages/icons.

Could you confirm whether {::warningtext as="hover"} is still supported, and if not, what the recommended Liquid snippet is to implement a warning/caution hover in this context?

Thanks!
Martijn

Hi Martijn (@MDomburg)!

After a closer look, I think I’ve found the issue, it’s a tiny syntax detail that’s easy to miss. It took me a while to spot it!

This is your code:

{% ic %}{::warningtext as=“hover”}Hover warningtext{:/warningtext}{% endic %}

And this is what it should be:

{% ic %}{::warningtext as="hover"}Hover warningtext{:/warningtext}{% endic %}

The quotation marks around the word hover in your version are curly quotes, while the correct syntax requires straight quotes.

Could you try updating them and see if that resolves the issue? Thanks in advance!

Kind regards,

Delphine

Hi Delphine,

Thanks again for your reply. I tried the following:
{% ic %}{::warningtext as=‘hover’}{% t “warning_compilation” %}{:/warningtext}{% endic %}

It doesn’t seem to matter whether I use single or double quotes. For infotext I also use single quotes instead of double quotes, and that doesn’t cause any issues.

Since Unreconciled already has a hover, I’m considering replacing warningtext with the unreconciled texts and adding an extra infotext. However, the hover for warningtext still works as described in the user manual.

Kind regards,
Martijn

Hi @MDomburg !

Your syntax is still a bit off, unfortunately. The quotation marks in your code are being converted into curly quotes instead of straight quotes, which breaks the syntax and it does not get recognised as a hover warning.

This is your code (with double curly quotes):

{% ic %}{::warningtext as=“hover”}Hover warningtext{:/warningtext}{% endic %}

This is your code (with single curly quotes):

{% ic %}{::warningtext as=‘hover’}Hover warningtext{:/warningtext}{% endic %}

This is how it should be (with double straight quotes):

{% ic %}{::warningtext as="hover"}Hover warningtext{:/warningtext}{% endic %}

This is how it should be (with single straight quotes):

{% ic %}{::warningtext as='hover'}Hover warningtext{:/warningtext}{% endic %}

This is the output of the coding snippets above:

Make sure to look closely at the quotes around the word hover. Coding syntax is very sensitive to these small differences, and that’s likely why your snippet wasn’t working.

Let me know if this version works for you!

Kind regards,

Delphine

Hi Delphine,

Something isn’t working right when I copy the Liquid code. I’m using straight apostrophes (') rather than curly quotes (’). The result also includes a hover effect. The only issue is that in the bottom-right corner of the editor a red cross appears instead of a green checkmark. It looks like a bug in the linter.

Kind regards,
Martijn