ToolTips

Tooltips are used to display extended information for an element or an action on the page. A basic tooltip shows information on hover and does not require additional JavaScript functions.

How to import tooltip styles:

In order to use tooltips in your project, import following path in your main styles:

@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/tooltip
How to customize tooltip styles:

In order to customize tooltips in your theme as per requirements, import following path in your theme-settings file:

@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/tooltip
Note: These imports also adds popover styles so we do not need to import them for popovers separately.
Tooltip with no arrow

This is a tooltip with dark background. Hover on icon to reveal tooltip This is a tooltip

This is a tooltip This is a tooltip with light background. Hover on icon to reveal tooltip 

<span style="color: var(--primary);" class="ml--2 tooltip-holder sample icon-info">
      <span class="dark curved py--2 px--3 text--center" data-arrow="false" data-position="top" data-type="tooltip" tabindex="1">This is a tooltip</span>
  </span>
<span style="color: var(--primary);" class="ml--2 tooltip-holder sample icon-info">
      <span class="light curved py--2 px--3 text--center" data-arrow="false" data-position="top" data-type="tooltip" tabindex="1">This is a tooltip</span>
  </span>
Tooltip with arrow

Hover on each element to reveal tooltip:

Top Start This is a tooltip
Top End This is a tooltip
Top This is a tooltip
Left Start This is a tooltip
Left This is a tooltip
Left End This is a tooltip
Right Start This is a tooltip
Right This is a tooltip
Right End This is a tooltip
Bottom Start This is a tooltip
Bottom This is a tooltip
Bottom End This is a tooltip 
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p--3 tooltip-holder">
  Top Start
  <span class="dark py--2 px--3 text--center" data-arrow="true" data-position="top-start" data-type="tooltip" tabindex="1">This is a tooltip</span>
</span>


<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p--3 tooltip-holder">
  Top End
  <span class="dark py--2 px--3 text--center" data-arrow="true" data-position="top-end" data-type="tooltip" tabindex="1">This is a tooltip</span>
</span>


<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p--3 tooltip-holder">
  Top
  <span class="dark py--2 px--3 text--center" data-arrow="true" data-position="top" data-type="tooltip" tabindex="1">This is a tooltip</span>
</span>


<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p--3 tooltip-holder">
  Left Start
  <span class="dark py--2 px--3 text--center" data-arrow="true" data-position="left-start" data-type="tooltip" tabindex="1">This is a tooltip</span>
</span>


<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p--3 tooltip-holder">
  Left
  <span class="dark py--2 px--3 text--center" data-arrow="true" data-position="left" data-type="tooltip" tabindex="1">This is a tooltip</span>
</span>


<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p--3 tooltip-holder">
  Left End
  <span class="dark py--2 px--3 text--center" data-arrow="true" data-position="left-end" data-type="tooltip" tabindex="1">This is a tooltip</span>
</span>


<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p--3 tooltip-holder">
  Right Start
  <span class="dark py--2 px--3 text--center" data-arrow="true" data-position="right-start" data-type="tooltip" tabindex="1">This is a tooltip</span>
</span>


<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p--3 tooltip-holder">
  Right
  <span class="dark py--2 px--3 text--center" data-arrow="true" data-position="right" data-type="tooltip" tabindex="1">This is a tooltip</span>
</span>


<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p--3 tooltip-holder">
  Right End
  <span class="dark py--2 px--3 text--center" data-arrow="true" data-position="right-end" data-type="tooltip" tabindex="1">This is a tooltip</span>
</span>


<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p--3 tooltip-holder">
  Bottom Start
  <span class="dark py--2 px--3 text--center" data-arrow="true" data-position="bottom-start" data-type="tooltip" tabindex="1">This is a tooltip</span>
</span>


<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p--3 tooltip-holder">
  Bottom
  <span class="dark py--2 px--3 text--center" data-arrow="true" data-position="bottom" data-type="tooltip" tabindex="1">This is a tooltip</span>
</span>


<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p--3 tooltip-holder">
  Bottom End
  <span class="dark py--2 px--3 text--center" data-arrow="true" data-position="bottom-end" data-type="tooltip" tabindex="1">This is a tooltip</span>
</span>
Tooltip Paragraphs

Some times there is detailed description required in tooltips. In such case the content increases although a max. character limit should be set.

Hover on icon to reveal tooltip: A cupcake is a small cake designed to serve one person, which may be baked in a small thin paper or aluminum cup. 

<span
      class="dark curved py--2 px--3"
      data-arrow="true"
      data-position="top"
      data-type="tooltip"
      tabindex="1">A cupcake is a small cake designed to serve one person, which may be baked in a small thin paper or aluminum cup.
  </span>

Popovers

As compared to tooltip, the purpose of popover is to provide additional information. They can also contain action buttons, links and alert messages.




info-icon
info-icon This is a dark popover (no Arrow) with a close button. close button


info-icon This is a dark popover (with Arrow) with a close button. close button


info-icon This is a light popover (with Arrow) with a close button. close button


info-icon This is a popover (with Arrow and rounded curves) with a close button. close button


info-icon This is a dark popover (with Left aligned Arrow) with a close button. close button


info-icon This is a dark popover (with Right aligned Arrow) with a close button. close button




info-icon This is a title A cupcake is a small cake designed to serve one person, which may be baked in a small thin paper or aluminum cup. close button






This is a title A cupcake is a small cake designed to serve one person, which may be baked in a small thin paper or aluminum cup.
close button




A cupcake is a small cake designed to serve one person, which may be baked in a small thin paper or aluminum cup.  Learn More
close button









This is a title A cupcake is a small cake designed to serve one person, which may be baked in a small thin paper or aluminum cup.
close button









This is a title A cupcake is a small cake designed to serve one person, which may be baked in a small thin paper or aluminum cup.
close button 








<div
  class="d--flex align--items--start dark p--3"
  data-arrow="false"
  data-position="top"
  data-type="popover"
  tabindex="1"
 >
  <span tabindex="1" class="icon icon-error mr--2">
    <span class="sr--only">info-icon</span>
  </span>
  <span tabindex="1"
    >This is a dark popover (no Arrow) with a close button.</span
  >
  <a href="#" class="btn--close ml--3">
    <span tabindex="1" class="icon icon-cross-circle">
      <span class="sr--only">close button</span>
    </span>
  </a>
</div>

<!-- 2  -->

<div
  class="d--flex align--items--start dark p--3"
  data-arrow="true"
  data-position="top"
  data-type="popover"
  tabindex="1"
  style="opacity: 1; visibility: visible;"
>
  <span tabindex="1" class="icon icon-error mr--3"
    ><span class="sr--only">info-icon</span></span
  >
  <span tabindex="1"
    >This is a dark popover (with Arrow) with a close button.</span
  >
  <a tabindex="1" href="#" class="btn--close ml--3">
    <span class="icon icon-cross-circle"
      ><span class="sr--only">close button</span></span
    >
  </a>
</div>

<!-- 3  -->

<div
  class="d--flex align--items--start light p--3"
  data-arrow="true"
  data-position="top"
  data-type="popover"
  tabindex="1"
  style="opacity: 1; visibility: visible;"
>
  <span tabindex="1" class="icon icon-error mr--3"
    ><span class="sr--only">info-icon</span></span
  >
  <span tabindex="1"
    >This is a light popover (with Arrow) with a close button.</span
  >
  <a tabindex="1" href="#" class="btn--close ml--3">
    <span class="icon icon-cross-circle"
      ><span class="sr--only">close button</span></span
    >
  </a>
</div>

<!-- 4  -->

<div
  class="d--flex align--items--start dark p--3 curved"
  data-arrow="true"
  data-position="top"
  data-type="popover"
  tabindex="1"
  style="opacity: 1; visibility: visible;"
>
  <span tabindex="1" class="icon icon-error mr--3"
    ><span class="sr--only">info-icon</span></span
  >
  <span tabindex="1"
    >This is a popover (with Arrow and rounded curves) with a close
    button.</span
  >
  <a tabindex="1" href="#" class="btn--close ml--3">
    <span class="icon icon-cross-circle"
      ><span class="sr--only">close button</span></span
    >
  </a>
</div>

<!-- 5 -->

<div
  class="d--flex align--items--start dark p--3"
  data-arrow="true"
  data-position="top-start"
  data-type="popover"
  tabindex="1"
  style="opacity: 1; visibility: visible;"
>
  <span tabindex="1" class="icon icon-error mr--3"
    ><span class="sr--only">info-icon</span></span
  >
  <span tabindex="1"
    >This is a dark popover (with Left aligned Arrow) with a close
    button.</span
  >
  <a tabindex="1" href="#" class="btn--close ml--3">
    <span class="icon icon-cross-circle"
      ><span class="sr--only">close button</span>
    </span></a
  >
</div>

<!-- 6 -->

<div
  class="d--flex align--items--start dark p--3"
  data-arrow="true"
  data-position="top-end"
  data-type="popover"
  tabindex="1"
  style="opacity: 1; visibility: visible;"
>
  <span tabindex="1" class="icon icon-error mr--3"
    ><span class="sr--only">info-icon</span></span
  >
  <span tabindex="1"
    >This is a dark popover (with Right aligned Arrow) with a close
    button.</span
  >
  <a tabindex="1" href="#" class="btn--close ml--3">
    <span class="icon icon-cross-circle"
      ><span class="sr--only">close button</span></span
    >
  </a>
</div>

<!-- 7 -->

<div
  class="d--flex align--items--start dark p--3"
  data-arrow="true"
  data-position="top"
  data-type="popover"
  tabindex="1"
  style="opacity: 1; visibility: visible;"
>
  <span tabindex="1" class="icon icon-error mr--3"
    ><span class="sr--only">info-icon</span></span
  >
  <span tabindex="1">
    <strong class="title">This is a title</strong>
    A cupcake is a small cake designed to serve one person, which
    may be baked in a small thin paper or aluminum cup.</span
  >
  <a href="#" class="btn--close ml--3">
    <span tabindex="1" class="icon icon-cross-circle"
      ><span class="sr--only">close button</span></span
    >
  </a>
</div>

<!-- 8 -->

<div
  class="d--flex align--items--start dark p--3"
  data-arrow="true"
  data-position="top"
  data-type="popover"
  tabindex="1"
  style="opacity: 1; visibility: visible;"
>
  <div class="popupWrap">
    <span tabindex="1" class="mb--3"
      ><strong class="title">This is a title</strong> A cupcake is a
      small cake designed to serve one person, which may be baked in
      a small thin paper or aluminum cup.</span
    >
    <footer tabindex="1">
      <a class="popoverLink" href="#">Link</a>
    </footer>
  </div>
  <a tabindex="1" href="#" class="btn--close ml--3"
    ><span class="icon icon-cross-circle"
      ><span class="sr--only">close button</span></span
    ></a
  >
</div>

<!-- 9 -->

<div
  class="d--flex align--items--start dark p--3"
  data-arrow="true"
  data-position="top"
  data-type="popover"
  tabindex="1"
  style="opacity: 1; visibility: visible;"
>
  <div class="popupWrap">
    <span tabindex="1"
      >A cupcake is a small cake designed to serve one person, which
      may be baked in a small thin paper or aluminum
      cup.&nbsp;&nbsp;<a class="linkMore" href="#">Learn More</a>
    </span>
  </div>
  <a tabindex="1" href="#" class="btn--close ml--3">
    <span class="icon icon-cross-circle">
      <span class="sr--only">close button</span>
    </span>
  </a>
</div>

<!-- 10 -->

<div
  class="d--flex align--items--start light p--3"
  data-arrow="true"
  data-position="top"
  data-type="popover"
  tabindex="1"
  style="opacity: 1; visibility: visible;"
>
  <div class="popupWrap">
    <span tabindex="1" class="mb--3"
      ><strong class="title">This is a title</strong> A cupcake is a
      small cake designed to serve one person, which may be baked in
      a small thin paper or aluminum cup.</span
    >
    <footer>
      <button tabindex="1" class="btn btn btn--outline btn--dark">
        Action1
      </button>
      <button tabindex="1" class="btn btn--dark">Action2</button>
      <button tabindex="1" class="btn btn--dark clear">
        Action3
      </button>
    </footer>
  </div>
  <a tabindex="1" href="#" class="btn--close ml--3">
    <span class="icon icon-cross-circle"
      ><span class="sr--only">close button</span></span
    >
  </a>
</div>

<!-- 11 -->

<div
  class="d--flex align--items--start dark p--3"
  data-arrow="true"
  data-position="top"
  data-type="popover"
  tabindex="1"
  style="opacity: 1; visibility: visible;"
>
  <div class="popupWrap">
    <ul class="mb--3 popupActionList list--unstyled">
      <li tabindex="1" class="mb--3">
        <a class="d--flex" href="#"
          ><span class="mr--3 icon icon-note-add"></span>Add a
          Note</a
        >
      </li>
      <li tabindex="1" class="mb--3">
        <a class="d--flex" href="#"
          ><span class="mr--3 icon icon-bookmarks"></span
          >Bookmark this</a
        >
      </li>
      <li tabindex="1" class="mb--3">
        <a class="d--flex" href="#"
          ><span class="mr--3 icon icon-heart"></span>Like it</a
        >
      </li>
      <li tabindex="1" class="mb--3">
        <a class="d--flex" href="#"
          ><span class="mr--3 icon icon-mail"></span>Email it</a
        >
      </li>
    </ul>
    <footer tabindex="1">
      <a href="#" class="btn--close d--flex"
        ><span class="mr--3 icon icon-cross-circle"></span
        >Close</a
      >
    </footer>
  </div>
</div>

Unlike tooltips, Popovers require additional JavaScript functions to activate.