Popover

<div style="display: none" class="e-popover">
  <div class="e-popover__arrow"></div>
  <button class="e-popover__close">
    ×
  </button>
  <div class="e-popover__content">
    You can now zoom in the chart by dragging your mouse to select your area of interest.
  </div>
</div>

                        <div style="display: none" class="e-popover">
                          <div class="e-popover__arrow"></div>
                          <button class="e-popover__close">×</button>
                          <div class="e-popover__content">You can now zoom in the chart by dragging your mouse to select your area of interest.</div>
                        </div>

<div class="e-popover top">
  <div style="left: 50%;" class="e-popover__arrow"></div>
  <button class="e-popover__close">
    ×
  </button>
  <div class="e-popover__content">
    You can now zoom in the chart by dragging your mouse to select your area of interest.
  </div>
</div>

                        <div class="e-popover top">
                          <div style="left: 50%;" class="e-popover__arrow"></div>
                          <button class="e-popover__close">×</button>
                          <div class="e-popover__content">You can now zoom in the chart by dragging your mouse to select your area of interest.</div>
                        </div>

<div class="e-popover bottom">
  <div style="left: 50%;" class="e-popover__arrow"></div>
  <button class="e-popover__close">
    ×
  </button>
  <div class="e-popover__content">
    You can now zoom in the chart by dragging your mouse to select your area of interest.
  </div>
</div>

                        <div class="e-popover bottom">
                          <div style="left: 50%;" class="e-popover__arrow"></div>
                          <button class="e-popover__close">×</button>
                          <div class="e-popover__content">You can now zoom in the chart by dragging your mouse to select your area of interest.</div>
                        </div>

<div class="e-popover right">
  <div class="e-popover__arrow"></div>
  <button class="e-popover__close">
    ×
  </button>
  <div class="e-popover__content">
    You can now zoom in the chart by dragging your mouse to select your area of interest.
  </div>
</div>

                        <div class="e-popover right">
                          <div class="e-popover__arrow"></div>
                          <button class="e-popover__close">×</button>
                          <div class="e-popover__content">You can now zoom in the chart by dragging your mouse to select your area of interest.</div>
                        </div>

<div class="e-popover left">
  <div class="e-popover__arrow"></div>
  <button class="e-popover__close">
    ×
  </button>
  <div class="e-popover__content">
    You can now zoom in the chart by dragging your mouse to select your area of interest.
  </div>
</div>

                        <div class="e-popover left">
                          <div class="e-popover__arrow"></div>
                          <button class="e-popover__close">×</button>
                          <div class="e-popover__content">You can now zoom in the chart by dragging your mouse to select your area of interest.</div>
                        </div>