CASE: create an infotext as hover

:mega::mega: This is a really nice update we just launched last night :mega::mega:

It is now possible to create certain infotext, but then as hover where the user has to mouse-over the infotext to see what it is saying :

09

To use this, simply use this code :


{::infotext as="hover"}
this text will be shown on hover
{:/infotext} 

Possibilities are HUGE here

For example, you could guide an user more into why the alarmbel procedure is active :


{% assign netto_actief = #16__59 %}
{% assign maatschappelijk_kapitaal = -1*#100 %}

  {% if netto_actief <= maatschappelijk_kapitaal/2 %}{% assign alarmbel = true %}{% endif %}
  {% unless sbvba %}
    {% if company_form == 'NV' or company_form == 'COMMVA' %}
      {% assign limit_alarmbel = "61.500" %}
      {% if netto_actief < 61500.00 %}{% assign artikel_634 = true %}{% endif %}
    {% elsif company_form == 'CVBA' %}
      {% if netto_actief < 6200 %}{% assign artikel_432 = true %}{% endif %}
      {% assign limit_alarmbel = "6.200" %}
    {% else %}
      {% if netto_actief < 6200 %}{% assign artikel_333 = true %}{% endif %}
      {% assign limit_alarmbel = "6.200" %}
    {% endif %}
  {% endunless %}


{% if alarmbel %}

{::infotext as="hover"}
There is calculated with **{{ limit_alarmbel }}** as a limit.  
Net assets are **{{ netto_actief | currency }}** and shared capital / 2 is **{{ maatschappelijk_kapitaal/2 | currency }}**.   
{:/infotext}

{% endif %} 

Which gives this result :

33

4 Likes

That really is a very nice update … Potential uses aimed at boosting UX are huge …Great work!

2 Likes

Hi Sven,

A really nice update … but I was wondering … is it possible to adapt the width of the message box (I’d like to put some legal articles in there as additional information but the box is rather narrow)?

Thanks!

@Bart_Verhaeghe,

no, it isn’t. In your case I’d suggest just an info-tag then perhaps; a hoover text can’t be overloaded with info (in our honest opinion :relaxed: )

@sven
Is it possible to change the colour of the hover to red for example ? or is it always grey ?

I tested this in one of our templates - see below…

I just want the hover-text to be shown if their isn’t a file uploaded. Problem i’m having with current code is that hoover-text is always shown. Even if a file is uploaded. Can you see what i’m doing wrong ?

{% if detail.custom.file == blank %}

{::infotext as=“hover”}
Vergeet je bijlage van je openstaande klanten niet toe te voegen !

{:/infotext}

{% endif %}

{% fori detail in current_account.details %}{% if forloop.first %}

|------------------------------|----------|--------------:+
| {% t “Zie afzonderlijke proef- en saldibalans” %}|{% input detail.custom.file as:file %}| {% input detail.custom.value as currency %}{% endif %}{% endfori %}

@Andrew,

Sorry to disappoint, but you can’t change the color. This is done of course to get a uniform look & feel in Silverfin :slightly_smiling_face:

Regarding your code, try changing your if-statement into this :


{% if detail.custom.file.document %}

Adding the documentto the object, will make it possible to check whether or not a document has been added.

Thx Sven!

Like this - see below … ? Not working for the moment. Must there not be added == blank ? or something else.
{% if detail.custom.file.document == blank %}

{% if detail.custom.file.document %}
{::infotext as=“hover”}
Vergeet je bijlage van je openstaande klanten niet toe te voegen !
{:/infotext}
{% endif %}

{% fori detail in current_account.details %}{% if forloop.first %}
|------------------------------|----------|--------------:+
| {% t “Zie afzonderlijke proef- en saldibalans” %}|{% input detail.custom.file as:file %}| {% input detail.custom.value as currency %}{% endif %}{% endfori %}

It works for me @Andrew.

Because it’s not related to the subject of this topic, I’ll link you to

If it doesn’t work, create a separate topic perhaps with the full code (with how the file is generated).

@sven

It works now ! I didn’t put my code within the fori-loop.

Last question - i see that hover-text is also exported when you put your template into pdf. Can that be switched off ? or not be shown ?

Thx !

@Andrew,

It can! Just use ic-tags like this :


{% ic %}
This will only be shown in input, and not in export / preview 
{% endic %}

Hi @sven,

This is a nifty little function! Is there a way to have the text showing from the left-hand side of the icon? When the icon is close to the right hand-side margin of the web browser, the text is cut off on the template:

Many thanks
Joe

Hi @jhanley,

This is a well-known issue and is in the planning to be resolved.

We will keep you updated as soon as this is fixed!

Kind regards,
Robin