Tooltips to help guide user when creating organisations or services

[digitalWestie]

(i) icon beside field names with description.

[Mike-Heneghan]

Example of tool tip in the project.

[Mike-Heneghan]

Organisation Search tooltip example:

        <span data-tooltip aria-haspopup="true" class="has-tip right" data-disable-hover="false" tabindex="2" title="If you are a member of an organisation you can claim representation and gain edit rights over its entry on ALISS.">
                          <i class="fa fa-question-circle" aria-hidden="true"></i>
                        </span>

[Mike-Heneghan]

Doc entry on adding help_text: https://docs.djangoproject.com/en/1.11/topics/forms/modelforms/#overriding-the-default-fields

[Mike-Heneghan]

Seems more sensible to have the help_text defined in the model form as it pertains to the model form and avoids adding verbose text to the model which is already complex.

import from django.utils.translation import ugettext_lazy as _

    help_texts = {
            'description': _('Helpful test for a description'),
        }

[Mike-Heneghan]

Organisation To Do List:

• [x] Review the help text and make sure it's relevant.
• [ ] ~Change the (?) to an (i)~ I think the (?) is more appropriate?
• [ ] Reinstate the Logo help text and add the tooltip elsewhere.

[Mike-Heneghan]

Services to Do List:

• [x] Check whether the same method can be used for adding new services.
• [x] Write help_text for adding services.
• [x] Remove service Description as it has an annotation already.
• [x] Remove Categories tooltip as it already has an annotation.
• [x] Remove Service Areas tooltip as it is already annotated.
• [x] Location is rendered differently so the tooltip needs to be added elsewhere.
• [ ] Test and review content.

[Mike-Heneghan]

As the tooltip.html is now spread between multiselect_field.html and field.html maybe it should be abstracted out into it's own partial?

[Mike-Heneghan]

In trying to implement the tooltip on the organisation logo field inadvertently created it with a different style.

It seems that where the tool tip (?) icon has been implemented elsewhere it's being the larger grey or red version. So for consistentency will update the Logo (?) in organisations.

Definitely starting to feel like the knowledge is being spread to multiple places in the app so updating in thre future could be problematic.

[Mike-Heneghan]

Unfortunately the logo-select class in the css is interfereing with the styling of the field label and tooltip.

<div class="f-row logo-select">
  <label for="id_logo">
    Logo
    {% if form.logo.help_text %}
    <span data-tooltip aria-haspopup="true" class="has-tip right" data-disable-hover="false" tabindex="2" title="{{form.logo.help_text}}">
      <i class="fa fa-question-circle" aria-hidden="true"></i>
    </span>
    {% endif %}
  </label><br/>

vs.

<div class="f-row">
    <label for="id_logo">
      Logo
      {% if form.logo.help_text %}
      <span data-tooltip aria-haspopup="true" class="has-tip right" data-disable-hover="false" tabindex="2" title="{{form.logo.help_text}}">
        <i class="fa fa-question-circle" aria-hidden="true"></i>
      </span>
      {% endif %}
    </label><br/>

[Mike-Heneghan]

Tried sorting this although it's becoming a bit of a palava for something which in many ways doesn't need an explanation or could be achieved through a more direct (not as good a practive approac like inline styling?).