Origami Frontend Components & Services

Demos: o-tooltip

Demo

Basic demo

<div class="o-colors-page-background">
  <div class="demo-tooltip-container" id="box-tooltip">
    <button
      class="o-buttons o-buttons--secondary o-buttons--big demo-tooltip-target"
      id="demo-tooltip-target"
    >
      Share
    </button>

    <div
      data-o-component="o-tooltip"
      data-o-tooltip-position="above"
      data-o-tooltip-target="demo-tooltip-target"
      data-o-tooltip-show-on-construction="true"
    >
      <div class="o-tooltip-content">
        <p>supercalifragilisticexpialidocious</p>
      </div>
    </div>
  </div>
</div>

Hover

Display on hover demo

<div class="o-colors-page-background">
  <div class="demo-tooltip-container" id="box-tooltip">
    <button
      class="o-buttons o-buttons--secondary o-buttons--big demo-tooltip-target"
      id="demo-tooltip-target"
    >
      Share
    </button>

    <div
      data-o-component="o-tooltip"
      data-o-tooltip-position="right"
      data-o-tooltip-target="demo-tooltip-target"
      data-o-tooltip-show-on-hover="true"
    >
      <div class="o-tooltip-content">Share this article via email</div>
    </div>
  </div>
</div>

Focus

Display on focus demo

<div class="o-colors-page-background">
  <div class="demo-tooltip-container" id="box-tooltip">
    <button
      class="o-buttons o-buttons--secondary o-buttons--big demo-tooltip-target"
      id="demo-tooltip-target"
    >
      Share
    </button>

    <div
      data-o-component="o-tooltip"
      data-o-tooltip-position="right"
      data-o-tooltip-target="demo-tooltip-target"
      data-o-tooltip-show-on-focus="true"
    >
      <div class="o-tooltip-content">Share this article via email</div>
    </div>
  </div>
</div>

Click

Display on click demo

<div class="o-colors-page-background">
  <div class="demo-tooltip-container" id="box-tooltip">
    <button
      class="o-buttons o-buttons--secondary o-buttons--big demo-tooltip-target"
      id="demo-tooltip-target"
    >
      Share
    </button>

    <div
      data-o-component="o-tooltip"
      data-o-tooltip-position="right"
      data-o-tooltip-target="demo-tooltip-target"
      data-o-tooltip-show-on-click="true"
    >
      <div class="o-tooltip-content">
        <p>Share this article via email</p>
      </div>
    </div>
  </div>
</div>

Toggle

Toggle on click demo

<div class="o-colors-page-background">
  <div class="demo-tooltip-container" id="box-tooltip">
    <button
      class="o-buttons o-buttons--secondary o-buttons--big demo-tooltip-target"
      id="demo-tooltip-target"
    >
      Share
    </button>

    <div
      data-o-component="o-tooltip"
      data-o-tooltip-position="right"
      data-o-tooltip-target="demo-tooltip-target"
      data-o-tooltip-toggle-on-click="true"
      data-o-tooltip-close-after="3"
      data-o-tooltip-show-on-construction="true"
    >
      <div class="o-tooltip-content">
        <p>Share this article via email</p>
      </div>
    </div>
  </div>
</div>

Timeout

Show/Hide Tooltip after timeout demo

<div class="o-colors-page-background">
  <div class="demo-tooltip-container" id="box-tooltip">
    <p>This tooltip will close after 3 seconds</p>
    <button
      class="o-buttons o-buttons--secondary o-buttons--big demo-tooltip-target"
      id="demo-tooltip-target"
    >
      Share
    </button>

    <div
      data-o-component="o-tooltip"
      data-o-tooltip-position="right"
      data-o-tooltip-target="demo-tooltip-target"
      data-o-tooltip-show-on-construction="true"
      data-o-tooltip-close-after="3"
    >
      <div class="o-tooltip-content">
        <p>Share this article via email</p>
      </div>
    </div>
    <p>This tooltip will show after 3 seconds</p>
    <button
      class="o-buttons o-buttons--secondary o-buttons--big demo-tooltip-target"
      id="demo-tooltip-target-2"
    >
      Share
    </button>

    <div
      data-o-component="o-tooltip"
      data-o-tooltip-position="right"
      data-o-tooltip-target="demo-tooltip-target-2"
      data-o-tooltip-show-after="3"
    >
      <div class="o-tooltip-content">
        <p>Share this article via email</p>
      </div>
    </div>
  </div>
</div>

No Markup

Tooltip declared in js, with no markup

<div class="o-colors-page-background">
  <div class="demo-tooltip-container" id="box-tooltip">
    <button
      class="o-buttons o-buttons--secondary o-buttons--big imperative-tooltip-target"
    >
      Hover
    </button>
  </div>
</div>

Responsive Positioning

Responsive positioning

<div class="o-colors-page-background">
  <div
    class="demo-tooltip-container"
    id="box-tooltip"
    style="margin-top: 200px; margin-left: 20%"
  >
    <button
      class="o-buttons o-buttons--secondary o-buttons--big demo-tooltip-target"
      id="demo-tooltip-target"
    >
      Share
    </button>

    <div
      data-o-component="o-tooltip"
      data-o-tooltip-position="above"
      data-o-tooltip-position-s="right"
      data-o-tooltip-position-m="below"
      data-o-tooltip-position-l="left"
      data-o-tooltip-position-xl="above"
      data-o-tooltip-target="demo-tooltip-target"
      data-o-tooltip-show-on-construction="true"
    >
      <div class="o-tooltip-content">
        <p>Spin me right round..</p>
      </div>
    </div>
  </div>
</div>

Custom Tooltip Theme

A custom theme added using the tooltip Sass API.

Status
active Origami v1
Switch component view

GitHub Repository

Install o-tooltip

If using the Build Service, add o-tooltip@^4.1.0 to your script and link tags.

If running a Manual Build, run npm install "o-tooltip@^4.1.0".

Help & Support

o-tooltip is maintained directly by the Origami team. If you have any questions about o-tooltip or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com