Tooltip

Migrating the Tooltip Component

Sources

PrestaShop UIKit

Original bootstrap component used in the PrestaShop UIKit:

 1<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
 2  Tooltip on top
 3</button>
 4<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
 5  Tooltip on right
 6</button>
 7<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
 8  Tooltip on bottom
 9</button>
10<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
11  Tooltip on left
12</button>

PUIK

Basic Use

For any tooltip component that you use, replace the structure above with the following structure:

 1<div class="puik-tooltip__wrapper">
 2  <div class="puik-icon material-icons-round" style="font-size: 1.25rem;">help_outline</div>
 3</div>
 4
 5<div
 6  class="puik-tooltip__tip"
 7  role="tooltip"
 8  style="
 9    z-index: 1000;
10    position: absolute;
11    inset: auto auto 0px 0px;
12    margin: 0px;
13    transform: translate(425px, -403px);
14    display: none;
15  "
16  data-popper-placement="top"
17>
18  <div class="puik-tooltip__tip__content">
19    <span class="puik-tooltip__tip__content__title">Title</span>
20    <span class="puik-tooltip__tip__content__description">This is a tooltip</span>
21  </div>
22
23  <div
24    class="puik-tooltip__tip__arrow"
25    style="position: absolute; left: 0px; transform: translate(52px, 0px);"
26  ></div>
27</div>

Visible

To make the tooltip visible, remove the display: none; style:

 1<div class="puik-tooltip__wrapper">
 2  <div class="puik-icon material-icons-round" style="font-size: 1.25rem;">help_outline</div>
 3</div>
 4
 5<div
 6  class="puik-tooltip__tip"
 7  role="tooltip"
 8  style="
 9    z-index: 1000;
10    position: absolute;
11    inset: auto auto 0px 0px;
12    margin: 0px;
13    transform: translate(425px, -403px);
14    display: none;
15  "
16  data-popper-placement="top"
17>
18  <div class="puik-tooltip__tip__content">
19    <span class="puik-tooltip__tip__content__title">Title</span>
20    <span class="puik-tooltip__tip__content__description">This is a tooltip</span>
21  </div>
22
23  <div
24    class="puik-tooltip__tip__arrow"
25    style="position: absolute; left: 0px; transform: translate(52px, 0px);"
26  ></div>
27</div>

Position

You have to place the tooltip by:

  • Setting its x and y positions,
  • Setting the tooltip arrow position.
 1<div class="puik-tooltip__wrapper">
 2  <div class="puik-icon material-icons-round" style="font-size: 1.25rem;">help_outline</div>
 3</div>
 4
 5<div
 6  class="puik-tooltip__tip"
 7  role="tooltip"
 8  style="
 9    z-index: 1000;
10    position: absolute;
11    inset: auto auto 0px 0px;
12    margin: 0px;
13    transform: translate(${XPosition}, ${YPosition});
14    display: none;
15  "
16>
17  <div class="puik-tooltip__tip__content">
18    <span class="puik-tooltip__tip__content__title">Title</span>
19    <span class="puik-tooltip__tip__content__description">This is a tooltip</span>
20  </div>
21
22  <div
23    class="puik-tooltip__tip__arrow"
24    style="
25      position: absolute;
26      left: 0px;
27      transform: translate(52px, 0px);
28    "
29  ></div>
30</div>
← Table