Tooltips
Simple Tooltips
<a data-toggle="tooltip" href="#" title="Tooltip on top"> Tooltip on top </a>
<a data-placement="left" data-toggle="tooltip" href="#" title="Tooltip on left"> Tooltip on left </a>
<a data-placement="bottom" data-toggle="tooltip" href="#" title="Tooltip on bottom"> Tooltip on bottom </a>
<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
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>
<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
<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>
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
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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.
<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 sit consequatur unde
Voluptatem ipsa qui sit mollitia aspernatur veniam ab alias rerum enim molestiae
Step 2 ut dolorem est
Sint molestiae praesentium doloribus nisi repellat nemo iste ut velit nemo rerum saepe laboriosam
<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
<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 2 deserunt qui consequatur
Qui et ipsum rerum cupiditate in nihil similique minima necessitatibus
<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>
<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 officiis ut accusantium
Est nemo eius maxime excepturi ipsa cum eos consequatur quisquam voluptatibus distinctio sint
Step 2 aliquam vitae iste
Rerum molestias nisi vel repellat et repudiandae quisquam omnis dignissimos accusantium
<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.