Tooltips

Simple Tooltips

Tooltip on top 
<a data-toggle="tooltip" href="#" title="Tooltip on top">
  Tooltip on top
</a>
Tooltip on left 
<a data-placement="left" data-toggle="tooltip" href="#" title="Tooltip on left">
  Tooltip on left
</a>
Tooltip on bottom 
<a data-placement="bottom" data-toggle="tooltip" href="#" title="Tooltip on bottom">
  Tooltip on bottom
</a>
Tooltip on right 
<a data-placement="right" data-toggle="tooltip" href="#" title="Tooltip on right">
  Tooltip on right
</a>

Complex Tooltips

Complex tooltips provide more extensive contextual information than simple tooltips. They can show images or paragraphs of text.

Trigger Attributes
Attribute Description
data-toggle Required value is "tooltip"
data-target Optional Identifies the tooltip element to show on trigger event. If there is no data-target value, it will target the next sibling element or the href value.
data-event Optional Event that shows and hides the target tooltip. Default is "hover"

Tooltip Width

Tooltip on top, centered

Complex Tooltip

Excepturi rerum voluptas qui pariatur ipsa quae veniam dicta quam neque fugit numquam non ipsum. Id voluptas perspiciatis facere repudiandae provident aperiam labore animi qui aut aut dicta aliquid dolores 

<a data-toggle="dialog">Tooltip on top, centered</a>
<div class="adb-complex_tooltip adb-js-dialog">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Debitis doloremque sit non optio atque nemo atque et accusantium sunt. Iusto sed in quam qui a consequuntur eum nihil
    </p>
  </div>
</div>
Tooltip on top, fluid width

Isabel Kinney

judith-glass@mail.com 
<a data-toggle="dialog">Tooltip on top, fluid width</a>
<div class="adb-complex_tooltip adb-js-dialog">
  <div class="adb-complex_tooltip--card adb-card">
    <div class="adb-card--image">
      <div class="adb-id">
        <img class="adb-id--img" src="../../images/avatars/nathanRomero-48x48.png" />
      </div>
    </div>
    <div class="adb-card--content adb-summary">
      <h3 class="adb-summary--title">
        <a data-truncate="line" href="../../prototype/account/user/">Melinda Cain
        </a>
      </h3>
      <div class="adb-summary--details">
        <a>
          vanessa-sparks@mac.com
        </a>
      </div>
    </div>
  </div>
</div>

Tooltip Triggers

Complex Tooltip

Sint fugiat et inventore sit in ut. Eius odio dolorem et pariatur aliquid rem 

<a class="adb-icon_alert" data-event="click" data-toggle="dialog">
  <i class="adb-icon__ellipsis_circle"></i>
</a>
<div class="adb-complex_tooltip adb-js-dialog">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Voluptatum aliquam reprehenderit deserunt dolor fugit voluptatem esse consequatur rerum voluptatum aliquam et harum. Sed incidunt cum sapiente quia voluptate illo minima molestiae nemo similique quisquam sapiente
    </p>
  </div>
</div>
Tooltip on top, centered

Complex Tooltip

Officiis in repellat ut ab nisi vel. Recusandae impedit libero asperiores 

<a data-toggle="dialog">Tooltip on top, centered</a>
<div class="adb-complex_tooltip adb-js-dialog">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Neque rerum non repellendus et sit aperiam autem alias enim dolore quam odit qui. Perspiciatis quae fuga praesentium excepturi exercitationem error ut qui omnis qui
    </p>
  </div>
</div>

Tooltip Placement

Tooltip on top, centered

Complex Tooltip

Quo corporis officiis qui voluptatem dolores eos sit suscipit eos temporibus sapiente consequatur. Voluptates quo soluta nobis quis veritatis laudantium 

<a data-toggle="dialog">Tooltip on top, centered</a>
<div class="adb-complex_tooltip adb-js-dialog">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Neque fugit vel mollitia consequatur commodi veniam autem quisquam repellendus natus qui quas est. Et et ut quia consequuntur impedit
    </p>
  </div>
</div>
Tooltip on top, aligned left

Complex Tooltip

Adipisci illo aut nesciunt aut. At voluptatem voluptates doloremque ad voluptatum 

<a data-toggle="dialog">Tooltip on top, aligned left</a>
<div class="adb-complex_tooltip adb-js-dialog" data-placement="top-left">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Labore deserunt corrupti cupiditate reiciendis exercitationem est quidem perspiciatis. Error qui voluptas et eos
    </p>
  </div>
</div>
Tooltip on top, aligned right

Complex Tooltip

Dolorem ipsum quae aut et quas eaque molestias tenetur aperiam tempore aut repellat ducimus. Rerum accusantium consectetur porro eius corrupti iure ipsam et expedita soluta rerum 

<a data-toggle="dialog">Tooltip on top, aligned right</a>
<div class="adb-complex_tooltip adb-js-dialog" data-placement="top-right">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Vel aliquid autem dolores sit ut nesciunt unde in aut. Et enim magni veritatis nihil voluptates quod quos fuga earum quidem
    </p>
  </div>
</div>
Tooltip on left, centered

Complex Tooltip

Ea dolores sit facilis necessitatibus possimus necessitatibus sapiente autem repudiandae tenetur et quia. Ipsum atque porro voluptatibus incidunt commodi itaque consectetur 

<a data-href="#" data-toggle="dialog">Tooltip on left, centered</a>
<div class="adb-complex_tooltip adb-js-dialog" data-placement="left">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Provident nostrum dolorum nam molestiae optio at. Sed sit vel ipsum repellat blanditiis
    </p>
  </div>
</div>
Tooltip on left, aligned top

Complex Tooltip

Perspiciatis ut quod quibusdam. Vel et reprehenderit iusto aut occaecati 

<a data-toggle="dialog">Tooltip on left, aligned top</a>
<div class="adb-complex_tooltip adb-js-dialog" data-placement="left-top">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Expedita ipsum hic repellendus molestiae nisi. Soluta temporibus et non in eligendi id libero dolorum unde
    </p>
  </div>
</div>
Tooltip on left, aligned bottom

Complex Tooltip

Consequatur voluptas eligendi occaecati ea placeat sequi. Cumque quisquam voluptates voluptatem 

<a data-toggle="dialog">Tooltip on left, aligned bottom</a>
<div class="adb-complex_tooltip adb-js-dialog" data-placement="left-bottom">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Dolores molestiae consequatur reprehenderit. Sit eaque eligendi accusamus et et tempora autem dolorem quod qui
    </p>
  </div>
</div>
Tooltip on bottom, centered

Complex Tooltip

Ut fugit fugit ipsam explicabo sunt. Similique et non accusamus sed ratione totam repellat officiis at sint labore consequatur soluta 

<a data-toggle="dialog">Tooltip on bottom, centered</a>
<div class="adb-complex_tooltip adb-js-dialog" data-placement="bottom">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Vitae accusamus veniam necessitatibus est voluptas qui maiores reiciendis reiciendis reprehenderit quisquam aut a pariatur. Veniam delectus cum incidunt deserunt consequatur et recusandae sint facilis voluptate qui
    </p>
  </div>
</div>
Tooltip on bottom, aligned left

Complex Tooltip

Et provident culpa sequi consectetur velit adipisci. Ducimus aut expedita eveniet tempore ut optio perferendis quasi facere dolores mollitia 

<a data-toggle="dialog">Tooltip on bottom, aligned left</a>
<div class="adb-complex_tooltip adb-js-dialog" data-placement="bottom-left">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Dolore unde sed recusandae aliquid aliquid assumenda. Alias dolore id asperiores consequatur eum maiores explicabo
    </p>
  </div>
</div>
Tooltip on bottom, aligned right

Complex Tooltip

Officia rem accusantium error ut a pariatur adipisci error aut amet blanditiis voluptatem nihil. Tenetur temporibus animi itaque laborum quis at exercitationem alias 

<a data-toggle="dialog">Tooltip on bottom, aligned right</a>
<div class="adb-complex_tooltip adb-js-dialog" data-placement="bottom-right">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Nemo nisi minima impedit at ad at quo quo aut autem earum voluptatem. Ea excepturi asperiores eos omnis quo sed dolorem ipsum qui maiores
    </p>
  </div>
</div>
Tooltip on right, centered

Complex Tooltip

Sed eos aut sequi ad praesentium nihil quia sed. Exercitationem quas cupiditate consequatur reprehenderit voluptate eos ut molestiae iste expedita necessitatibus et 

<a data-toggle="dialog">Tooltip on right, centered</a>
<div class="adb-complex_tooltip adb-js-dialog" data-placement="right">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Est quo illo eum ut atque corporis vero consequatur praesentium dolorem sequi aspernatur itaque expedita. Illo sed nisi vitae voluptates quidem ipsum voluptates
    </p>
  </div>
</div>
Tooltip on right, aligned top

Complex Tooltip

Optio aut deleniti quia eaque ex non sint. Non porro suscipit doloremque ut et nesciunt 

<a data-toggle="dialog">Tooltip on right, aligned top</a>
<div class="adb-complex_tooltip adb-js-dialog" data-placement="right-top">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Rerum id et dolorum sequi velit sequi minus blanditiis quibusdam et. Nulla quis deleniti sit consequatur fugit quidem voluptas nesciunt totam
    </p>
  </div>
</div>
Tooltip on right, aligned bottom

Complex Tooltip

Quos officiis sunt ea numquam qui quam optio nihil tenetur fugiat. Libero quibusdam nostrum consequuntur maxime aliquid et perferendis aut ratione fuga sapiente aspernatur voluptate dolores 

<a data-toggle="dialog">Tooltip on right, aligned bottom</a>
<div class="adb-complex_tooltip adb-js-dialog" data-placement="right-bottom">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Et iste perspiciatis unde. Natus corrupti est dolorem voluptas natus unde veritatis architecto
    </p>
  </div>
</div>

Guided Tooltips

Guided Tooltips come with navigation that allows users to move between tooltips on a page. They educate users about new or important features.

Trigger Attributes
Attribute Description
data-toggle Required value is "guided"
data-order Identifies the order of the tooltip
data-target Identifies the tooltip element to show on trigger event
data-group Optional Identifies groups of tooltips if there are multiple groups of guided tooltips on a single page
data-event Optional Event that shows and hides the target tooltip. Default is hover for all tooltips. Use data-event="click" for guided tooltips.
Target Attributes
Attribute Description
data-placement Default value is "top"

Tooltip Style

You can use dark dialog boxes instead of the default white/gray pictured above.

Step 1.

Step 1 quia id et

Ea nisi quibusdam sint et

Step 2.

Step 2 recusandae animi modi

Quod odit cum accusantium corporis

Step 3.

Step 3 omnis omnis autem

Hic autem sapiente cum dolores culpa maxime et quas

<a data-event="click" data-group="1" data-order="1" data-target="#guided-step1" data-toggle="guided" href="#">
  Step 1.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="top" id="guided-step1">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 1
    voluptate perspiciatis dolores
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Perferendis tempore voluptate maxime minima quaerat ut facere et sed aliquid non itaque cumque cupiditate</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev" disabled>
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next">
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
<a data-event="click" data-group="1" data-order="2" data-target="#guided-step2" data-toggle="guided" href="#">
  Step 2.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="top" id="guided-step2">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 2
    quod cumque qui
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Sed ut impedit rerum asperiores voluptatem molestias non et</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev">
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next">
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
<a data-event="click" data-group="1" data-order="3" data-target="#guided-step3" data-toggle="guided" href="#">
  Step 3.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="top" id="guided-step3">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 3
    delectus velit exercitationem
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Sed eos laboriosam placeat praesentium qui esse sed voluptatem</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev">
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next" disabled>
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
Step 1.

Step 1 sit consequatur unde

Voluptatem ipsa qui sit mollitia aspernatur veniam ab alias rerum enim molestiae

Step 2.

Step 2 ut dolorem est

Sint molestiae praesentium doloribus nisi repellat nemo iste ut velit nemo rerum saepe laboriosam

Step 3.

Step 3 id voluptatum iure

In cum et qui corrupti vitae harum voluptatem dolor perferendis eligendi maiores fugiat vero quibusdam

<a data-event="click" data-group="3" data-order="1" data-target="#guided-dark-step1" data-toggle="guided" href="#">
  Step 1.
</a>
<div class="adb-guided_tooltip__dark adb-guided_tooltip adb-js-dialog" data-placement="top" id="guided-dark-step1">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 1
    magni suscipit est
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Quo maiores fuga molestiae et qui dolore harum quidem quidem sint aut</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset_dark adb-pager--item adb-pager--button__prev" disabled>
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset_dark adb-pager--item adb-pager--button__next">
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
<a data-event="click" data-group="3" data-order="2" data-target="#guided-dark-step2" data-toggle="guided" href="#">
  Step 2.
</a>
<div class="adb-guided_tooltip__dark adb-guided_tooltip adb-js-dialog" data-placement="top" id="guided-dark-step2">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 2
    sed nesciunt alias
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Amet id quia odit</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset_dark adb-pager--item adb-pager--button__prev">
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset_dark adb-pager--item adb-pager--button__next">
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
<a data-event="click" data-group="3" data-order="3" data-target="#guided-dark-step3" data-toggle="guided" href="#">
  Step 3.
</a>
<div class="adb-guided_tooltip__dark adb-guided_tooltip adb-js-dialog" data-placement="top" id="guided-dark-step3">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 3
    vel in mollitia
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Maxime enim dignissimos eius tenetur laborum ducimus aut quod quia voluptatum molestiae impedit laboriosam quo</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset_dark adb-pager--item adb-pager--button__prev">
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset_dark adb-pager--item adb-pager--button__next" disabled>
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>

Tooltip Placement

Step 1.

Step 1 iure sunt enim

Iusto reiciendis amet sint natus ullam est itaque vel ut

Step 2.

Step 2 ipsa in debitis

Maiores explicabo ut ab

Step 3.

Step 3 nesciunt sunt repellat

Qui dignissimos enim commodi iste quo ratione modi

<a data-event="click" data-group="7" data-order="1" data-target="#guided-top-step1" data-toggle="guided" href="#">
  Step 1.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="top" id="guided-top-step1">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 1
    est quisquam perspiciatis
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Amet quia sunt aspernatur aut</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev" disabled>
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next">
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
<a data-event="click" data-group="7" data-order="2" data-target="#guided-top-step2" data-toggle="guided" href="#">
  Step 2.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="top" id="guided-top-step2">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 2
    quia laudantium aut
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Blanditiis architecto excepturi dolorem autem aliquid perspiciatis consequatur in quas</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev">
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next">
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
<a data-event="click" data-group="7" data-order="3" data-target="#guided-top-step3" data-toggle="guided" href="#">
  Step 3.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="top" id="guided-top-step3">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 3
    in nulla aut
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Blanditiis optio atque atque ab omnis facilis vel consectetur occaecati hic delectus</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev">
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next" disabled>
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
Step 1.

Step 1 et eveniet nobis

Odio et et qui impedit ut similique numquam eum fugiat

Step 2.

Step 2 deserunt qui consequatur

Qui et ipsum rerum cupiditate in nihil similique minima necessitatibus

Step 3.

Step 3 at eum neque

Itaque quidem rem ut vitae aut enim aspernatur et

<a data-event="click" data-group="4" data-order="1" data-target="#guided-left-step1" data-toggle="guided" href="#">
  Step 1.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="left" id="guided-left-step1">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 1
    corporis sit perferendis
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Voluptatibus facere sint consequatur maiores enim dolorem aut cum libero nihil voluptas eligendi voluptatem ipsam</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev" disabled>
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next">
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
<a data-event="click" data-group="4" data-order="2" data-target="#guided-left-step2" data-toggle="guided" href="#">
  Step 2.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="left" id="guided-left-step2">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 2
    dolore minima quo
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Et cumque sit tenetur eius dolores quaerat velit voluptate est sit ratione sit quis</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev">
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next">
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
<a data-event="click" data-group="4" data-order="3" data-target="#guided-left-step3" data-toggle="guided" href="#">
  Step 3.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="left" id="guided-left-step3">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 3
    et perferendis neque
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Omnis quisquam iusto dolorem quo atque assumenda nihil natus repellendus qui quis maxime asperiores incidunt</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev">
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next" disabled>
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
Step 1.

Step 1 asperiores non consectetur

In sit dolor repellat officia sit exercitationem ad qui dolorum

Step 2.

Step 2 et consectetur quis

Repellendus et earum quia sed quam sunt id fugit optio eaque

Step 3.

Step 3 ipsam dolores sunt

Sit nemo sit beatae omnis laborum atque odit maxime numquam

<a data-event="click" data-group="2" data-order="1" data-target="#guided-bottom-step1" data-toggle="guided" href="#">
  Step 1.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="bottom" id="guided-bottom-step1">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 1
    laudantium nulla non
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Nostrum et nulla velit velit iusto enim et quia vel</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev" disabled>
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next">
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
<a data-event="click" data-group="2" data-order="2" data-target="#guided-bottom-step2" data-toggle="guided" href="#">
  Step 2.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="bottom" id="guided-bottom-step2">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 2
    officiis expedita illum
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Vero iure harum voluptas est sapiente ab cum esse rerum voluptas</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev">
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next">
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
<a data-event="click" data-group="2" data-order="3" data-target="#guided-bottom-step3" data-toggle="guided" href="#">
  Step 3.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="bottom" id="guided-bottom-step3">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 3
    animi odit quidem
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Sed nihil omnis ut eum voluptatum sapiente</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev">
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next" disabled>
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
Step 1.

Step 1 officiis ut accusantium

Est nemo eius maxime excepturi ipsa cum eos consequatur quisquam voluptatibus distinctio sint

Step 2.

Step 2 aliquam vitae iste

Rerum molestias nisi vel repellat et repudiandae quisquam omnis dignissimos accusantium

Step 3.

Step 3 voluptatum iusto quam

Voluptate labore et temporibus quia voluptates reiciendis dolores qui repudiandae voluptatem aut

<a data-event="click" data-group="5" data-order="1" data-target="#guided-right-step1" data-toggle="guided" href="#">
  Step 1.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="right" id="guided-right-step1">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 1
    unde ullam quibusdam
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Expedita ut beatae voluptatibus eveniet sit</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev" disabled>
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next">
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
<a data-event="click" data-group="5" data-order="2" data-target="#guided-right-step2" data-toggle="guided" href="#">
  Step 2.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="right" id="guided-right-step2">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 2
    consequuntur quaerat voluptas
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Veritatis inventore praesentium qui aliquam sed excepturi vero explicabo nobis sint</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev">
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next">
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>
<a data-event="click" data-group="5" data-order="3" data-target="#guided-right-step3" data-toggle="guided" href="#">
  Step 3.
</a>
<div class="adb-guided_tooltip adb-js-dialog" data-placement="right" id="guided-right-step3">
  <h3 class="adb-guided_tooltip--header" data-truncate="line">
    Step 3
    et eligendi blanditiis
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Ad inventore excepturi iusto explicabo dolore ea est atque et totam earum</p>
  </div>
  <div class="adb-guided_tooltip--footer">
    <nav class="adb-pager">
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__prev">
        <i class="adb-icon__arrow_left"></i>
      </button>
      <div class="adb-pager--caption adb-pager--item"></div>
      <button class="adb-button__square_small adb-button__inset adb-pager--item adb-pager--button__next" disabled>
        <i class="adb-icon__arrow_right"></i>
      </button>
    </nav>
  </div>
</div>

Additional placement options are available. See Complex Tooltips above.