Base by AppDirect

Display

Communicate specialized information

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"
data-placement Default value is "top"
Content Attributes
Attribute Description
data-size Optional Different fixed sizes for the tooltip. Sizes are: small medium large x-large
data-hide-arrow Optional Hides the tooltips arrow / chevron and places it closer to the trigger. true
data-overflow Optional Scrollbars will be added if the content is too large. The arrow / chevron disappears scroll

Tooltip Width

Tooltip on top, centered

Complex Tooltip

Alias consequatur aut perferendis sit. Voluptatem accusantium doloremque aperiam eaque 

<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>
      Ipsa quae ab illo inventore. Veritatis et quasi architecto beatae
    </p>
  </div>
</div>
Tooltip on top, fluid width

Judith Chung

margarita_melton@gmail.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?1567620427" />
      </div>
    </div>
    <div class="adb-card--content adb-summary">
      <h3 class="adb-summary--title">
        <a data-truncate="line" href="../../prototype/account/user/">Kerry Hill
        </a>
      </h3>
      <div class="adb-summary--details">
        <a>
          lorenzo-song@yahoo.com
        </a>
      </div>
    </div>
  </div>
</div>

Tooltip Triggers

Tooltip via click, on top, centered

Complex Tooltip

Vitae dicta sunt explicabo aspernatur. Aut odit aut fugit sed 

<a data-event="click" data-toggle="dialog">
  Tooltip via click, on top, centered
</a>
<div class="adb-complex_tooltip adb-js-dialog">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Quia consequuntur magni dolores eos. Qui ratione voluptatem sequi nesciunt
    </p>
  </div>
</div>
Tooltip on top, centered

Complex Tooltip

Neque dolorem ipsum quia dolor. Sit amet consectetur adipisci velit 

<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>
      Sed quia non numquam eius. Modi tempora incidunt ut labore
    </p>
  </div>
</div>

Notice the opacity change on the System Information Icons on hover.

<i class="adb-icon_alert adb-icon__question" data-toggle="tooltip" title="03/10/2015"></i>

Tooltip Placement

Tooltip on top, centered

Complex Tooltip

Et dolore magnam aliquam quaerat. Voluptatem ut enim ad minima 

<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>
      Veniam quis nostrum exercitationem ullam. Corporis nemo enim ipsam voluptatem
    </p>
  </div>
</div>
Tooltip on top, aligned left

Complex Tooltip

Quia voluptas sit suscipit laboriosam. Nisi ut aliquid ex ea 

<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>
      Commodi consequatur quis autem vel. Eum iure reprehenderit qui in
    </p>
  </div>
</div>
Tooltip on top, aligned right

Complex Tooltip

Ea voluptate velit esse quam. Nihil molestiae et iusto odio 

<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>
      Dignissimos ducimus qui blanditiis praesentium. Laudantium totam rem voluptatum deleniti
    </p>
  </div>
</div>
Tooltip on left, centered

Complex Tooltip

Atque corrupti quos dolores et. Quas molestias excepturi sint occaecati 

<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>
      Cupiditate non provident sed ut. Perspiciatis unde omnis iste natus
    </p>
  </div>
</div>
Tooltip on left, aligned top

Complex Tooltip

Error similique sunt in culpa. Qui officia deserunt mollitia animi 

<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>
      Id est laborum et dolorum. Fuga et harum quidem rerum
    </p>
  </div>
</div>
Tooltip on left, aligned bottom

Complex Tooltip

Facilis est et expedita distinctio. Nam libero tempore cum soluta 

<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>
      Nobis est eligendi optio cumque. Nihil impedit quo porro quisquam
    </p>
  </div>
</div>
Tooltip on bottom, centered

Complex Tooltip

Est qui minus id quod. Maxime placeat facere possimus omnis 

<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>
      Voluptas assumenda est omnis dolor. Repellendus temporibus autem quibusdam et
    </p>
  </div>
</div>
Tooltip on bottom, aligned left

Complex Tooltip

Aut consequatur vel illum qui. Dolorem eum fugiat quo voluptas 

<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>
      Nulla pariatur at vero eos. Et accusamus officiis debitis aut
    </p>
  </div>
</div>
Tooltip on bottom, aligned right

Complex Tooltip

Rerum necessitatibus saepe eveniet ut. Et voluptates repudiandae sint et 

<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>
      Molestiae non recusandae itaque earum. Rerum hic tenetur a sapiente
    </p>
  </div>
</div>
Tooltip on right, centered

Complex Tooltip

Delectus ut aut reiciendis voluptatibus. Maiores doloribus asperiores repellat repellat 

<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>
      Alias consequatur aut perferendis sit. Voluptatem accusantium doloremque aperiam eaque
    </p>
  </div>
</div>
Tooltip on right, aligned top

Complex Tooltip

Ipsa quae ab illo inventore. Veritatis et quasi architecto beatae 

<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>
      Vitae dicta sunt explicabo aspernatur. Aut odit aut fugit sed
    </p>
  </div>
</div>
Tooltip on right, aligned bottom

Complex Tooltip

Quia consequuntur magni dolores eos. Qui ratione voluptatem sequi nesciunt 

<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>
      Neque dolorem ipsum quia dolor. Sit amet consectetur adipisci velit
    </p>
  </div>
</div>

Tooltip Size

Tooltip on bottom, aligned center in size small

Complex Tooltip

Sed quia non numquam eius. Modi tempora incidunt ut labore. Et dolore magnam aliquam quaerat. Voluptatem ut enim ad minima 

<a data-toggle="dialog">Tooltip on bottom, aligned center in size small</a>
<div class="adb-complex_tooltip adb-js-dialog" data-hide-arrow="true" data-placement="bottom" data-size="small">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Veniam quis nostrum exercitationem ullam. Corporis nemo enim ipsam voluptatem. Quia voluptas sit suscipit laboriosam. Nisi ut aliquid ex ea
    </p>
  </div>
</div>
Tooltip on bottom, aligned center in size medium

Complex Tooltip

Commodi consequatur quis autem vel. Eum iure reprehenderit qui in. Ea voluptate velit esse quam. Nihil molestiae et iusto odio. Dignissimos ducimus qui blanditiis praesentium. Laudantium totam rem voluptatum deleniti 

<a data-toggle="dialog">Tooltip on bottom, aligned center in size medium</a>
<div class="adb-complex_tooltip adb-js-dialog" data-hide-arrow="true" data-placement="bottom" data-size="medium">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Atque corrupti quos dolores et. Quas molestias excepturi sint occaecati. Cupiditate non provident sed ut. Perspiciatis unde omnis iste natus. Error similique sunt in culpa. Qui officia deserunt mollitia animi
    </p>
  </div>
</div>
Tooltip on bottom, aligned center in size large

Complex Tooltip

Id est laborum et dolorum. Fuga et harum quidem rerum. Facilis est et expedita distinctio. Nam libero tempore cum soluta. Nobis est eligendi optio cumque. Nihil impedit quo porro quisquam. Est qui minus id quod. Maxime placeat facere possimus omnis. Voluptas assumenda est omnis dolor. Repellendus temporibus autem quibusdam et 

<a data-toggle="dialog">Tooltip on bottom, aligned center in size large</a>
<div class="adb-complex_tooltip adb-js-dialog" data-hide-arrow="true" data-placement="bottom" data-size="large">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Aut consequatur vel illum qui. Dolorem eum fugiat quo voluptas. Nulla pariatur at vero eos. Et accusamus officiis debitis aut. Rerum necessitatibus saepe eveniet ut. Et voluptates repudiandae sint et. Molestiae non recusandae itaque earum. Rerum hic tenetur a sapiente. Delectus ut aut reiciendis voluptatibus. Maiores doloribus asperiores repellat repellat
    </p>
  </div>
</div>
Tooltip on bottom, aligned center in size x-large

Complex Tooltip

Alias consequatur aut perferendis sit. Voluptatem accusantium doloremque aperiam eaque. Ipsa quae ab illo inventore. Veritatis et quasi architecto beatae. Vitae dicta sunt explicabo aspernatur. Aut odit aut fugit sed. Quia consequuntur magni dolores eos. Qui ratione voluptatem sequi nesciunt. Neque dolorem ipsum quia dolor. Sit amet consectetur adipisci velit. Sed quia non numquam eius. Modi tempora incidunt ut labore 

<a data-toggle="dialog">Tooltip on bottom, aligned center in size x-large</a>
<div class="adb-complex_tooltip adb-js-dialog" data-hide-arrow="true" data-placement="bottom" data-size="x-large">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Et dolore magnam aliquam quaerat. Voluptatem ut enim ad minima. Veniam quis nostrum exercitationem ullam. Corporis nemo enim ipsam voluptatem. Quia voluptas sit suscipit laboriosam. Nisi ut aliquid ex ea. Commodi consequatur quis autem vel. Eum iure reprehenderit qui in. Ea voluptate velit esse quam. Nihil molestiae et iusto odio. Dignissimos ducimus qui blanditiis praesentium. Laudantium totam rem voluptatum deleniti
    </p>
  </div>
</div>

Scrollable Tooltip

Scrollable Tooltip on bottom, triggered by click

Complex Tooltip

Atque corrupti quos dolores et. Quas molestias excepturi sint occaecati. Cupiditate non provident sed ut. Perspiciatis unde omnis iste natus. Error similique sunt in culpa. Qui officia deserunt mollitia animi. Id est laborum et dolorum. Fuga et harum quidem rerum. Facilis est et expedita distinctio. Nam libero tempore cum soluta. Nobis est eligendi optio cumque. Nihil impedit quo porro quisquam. Est qui minus id quod. Maxime placeat facere possimus omnis. Voluptas assumenda est omnis dolor. Repellendus temporibus autem quibusdam et. Aut consequatur vel illum qui. Dolorem eum fugiat quo voluptas. Nulla pariatur at vero eos. Et accusamus officiis debitis aut 

<a data-event="click" data-toggle="dialog">Scrollable Tooltip on bottom, triggered by click</a>
<div class="adb-complex_tooltip adb-js-dialog" data-hide-arrow="true" data-overflow="scroll" data-placement="bottom" data-size="small">
  <div class="adb-complex_tooltip--content">
    <h3>Complex Tooltip</h3>
    <p>
      Rerum necessitatibus saepe eveniet ut. Et voluptates repudiandae sint et. Molestiae non recusandae itaque earum. Rerum hic tenetur a sapiente. Delectus ut aut reiciendis voluptatibus. Maiores doloribus asperiores repellat repellat. Alias consequatur aut perferendis sit. Voluptatem accusantium doloremque aperiam eaque. Ipsa quae ab illo inventore. Veritatis et quasi architecto beatae. Vitae dicta sunt explicabo aspernatur. Aut odit aut fugit sed. Quia consequuntur magni dolores eos. Qui ratione voluptatem sequi nesciunt. Neque dolorem ipsum quia dolor. Sit amet consectetur adipisci velit. Sed quia non numquam eius. Modi tempora incidunt ut labore. Et dolore magnam aliquam quaerat. Voluptatem ut enim ad minima
    </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 veniam quis nostrum exercitationem ullam

Corporis nemo enim ipsam voluptatem

Step 2.

Step 2 quia voluptas sit suscipit laboriosam

Nisi ut aliquid ex ea

Step 3.

Step 3 commodi consequatur quis autem vel

Eum iure reprehenderit qui in

<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
    ea voluptate velit esse quam
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Nihil molestiae et iusto odio</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
    dignissimos ducimus qui blanditiis praesentium
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Laudantium totam rem voluptatum deleniti</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
    atque corrupti quos dolores et
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Quas molestias excepturi sint occaecati</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 cupiditate non provident sed ut

Perspiciatis unde omnis iste natus

Step 2.

Step 2 error similique sunt in culpa

Qui officia deserunt mollitia animi

Step 3.

Step 3 id est laborum et dolorum

Fuga et harum quidem rerum

<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
    facilis est et expedita distinctio
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Nam libero tempore cum soluta</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
    nobis est eligendi optio cumque
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Nihil impedit quo porro quisquam</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
    est qui minus id quod
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Maxime placeat facere possimus omnis</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 voluptas assumenda est omnis dolor

Repellendus temporibus autem quibusdam et

Step 2.

Step 2 aut consequatur vel illum qui

Dolorem eum fugiat quo voluptas

Step 3.

Step 3 nulla pariatur at vero eos

Et accusamus officiis debitis aut

<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
    rerum necessitatibus saepe eveniet ut
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Et voluptates repudiandae sint 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" 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
    molestiae non recusandae itaque earum
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Rerum hic tenetur a 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">
        <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
    delectus ut aut reiciendis voluptatibus
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Maiores doloribus asperiores repellat repellat</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 alias consequatur aut perferendis sit

Voluptatem accusantium doloremque aperiam eaque

Step 2.

Step 2 ipsa quae ab illo inventore

Veritatis et quasi architecto beatae

Step 3.

Step 3 vitae dicta sunt explicabo aspernatur

Aut odit aut fugit sed

<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
    quia consequuntur magni dolores eos
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Qui ratione voluptatem sequi nesciunt</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
    neque dolorem ipsum quia dolor
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Sit amet consectetur adipisci velit</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
    sed quia non numquam eius
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Modi tempora incidunt ut labore</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 dolore magnam aliquam quaerat

Voluptatem ut enim ad minima

Step 2.

Step 2 veniam quis nostrum exercitationem ullam

Corporis nemo enim ipsam voluptatem

Step 3.

Step 3 quia voluptas sit suscipit laboriosam

Nisi ut aliquid ex ea

<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
    commodi consequatur quis autem vel
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Eum iure reprehenderit qui in</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
    ea voluptate velit esse quam
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Nihil molestiae et iusto odio</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
    dignissimos ducimus qui blanditiis praesentium
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Laudantium totam rem voluptatum deleniti</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 atque corrupti quos dolores et

Quas molestias excepturi sint occaecati

Step 2.

Step 2 cupiditate non provident sed ut

Perspiciatis unde omnis iste natus

Step 3.

Step 3 error similique sunt in culpa

Qui officia deserunt mollitia animi

<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
    id est laborum et dolorum
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Fuga et harum quidem rerum</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
    facilis est et expedita distinctio
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Nam libero tempore cum soluta</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
    nobis est eligendi optio cumque
    <a class="adb-close" data-dismiss="dialog" href="#" title="Close"></a>
  </h3>
  <div class="adb-guided_tooltip--content">
    <p>Nihil impedit quo porro quisquam</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.