Uploaded image for project: 'eZ Publish / Platform'
  1. eZ Publish / Platform
  2. EZP-31236

Add Tooltips as new UI component

    XMLWordPrintable

    Details

      Description

      Add Tooltips as new UI component:

      Tooltips will help us to explain action buttons to users and provide more information on the spot when users hover over, focus on, or tap an element. A tooltip is displayed upon hovering over it (desktop devices). 

       

      Usage: When activated, tooltips will display a button's label identifying that element, such as a description of its function and button's label is removed.

      Types:
      Common CSS properties of the ez-tooltip are:

      border: 1px solid $ez-ground-base-dark;
      border-radius: 4px;
      background-color: $ez-white;
      color: $ez-black;
      font-weight: 700;
      text-align: left;
      box-shadow: 0 4px 6px rgba(135,135,135,0.35);
      

      There are two types ez-tooltip--big and ez-tooltip-small
      Specific properties for ez-tooltip--small are:

      padding: 0.25rem 0.625rem;
      font-size: 0.6875rem;
      line-height: 0.8125rem;

      Specific properties for ez-tooltip--big are:

      padding: 0.5rem 1rem;
      font-size: 0.8125rem;
      line-height: 0.9375rem;

      For ez-tooltip--big when placed on the right (data-placement="right"), tooltip-inner should also have:

      margin-left: -1px;
      

      For ez-tooltip--big when placed on the left (data-placement="left"), tooltip-inner should also have:

      margin-right: -1px;
      

      For ez-tooltip--small when placed on the bottom, tooltip-inner should also have:

      margin-top: -1px;
      

      Placement: 
      ez-tooltip--big is designed for the main action bars and will show up on one of the sides, either left or right, depending on the given action bar (ez-context-menu). For instance, in Platform UI for the Discovery bar, they will be displayed on the right side and for the Action bar, they will be displayed on the left side.

      ez-tooltip--small is designed for the rest of the action buttons and are always displayed at the bottom. Button labels should be removed, unless specified not.

      Behavior: They are displayed upon hovering over it (desktop and laptop devices). Continuously display the tooltip as long as the user long-hovers over the element. If the user takes another action before that time ends, the tooltip will disappear.

      Motion: Over 150ms, tooltips fade in. They fade out over 75ms.

      Timing: For extensibility purposes, developers should be able to limit display of tooltip for the amount of miliseconds defined. 

      Disabled buttons: When a button is disabled, tooltip will be shown too. Cursor will keep its not-allowed value.

      Language: Tooltips should be translatable as the rest of the UI.

      Exceptions. When Tooltip component will not be used: Dropdowns, Select lists and also when defined in prototypes not to implement them.

       

      Note: Given we are using Bootstrap's tooltip component, we rely on the support Bootstrap provides for touch screen devices.

      Note 2: Bootstrap's Tooltip behavior defined when, for instance, a given button is reaching the bottom of the browser window and tooltip is placed at the bottom, tooltip will be shown at the top, but it doesn't keep design style nor its size (something to check).

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              Unassigned
              Reporter:
              inaki.juaniz-velilla@ez.no Inaki Juaniz-Velilla
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved: