Pop-Up Components

User Guide → Pop-Up Components

Pop-Up Components

The components in this page can be used to easily create various forms of pop-ups that are activated on some user action (e.g., hovering over some text). This may be useful for showing additional information related to some specific area or span of content.

Tooltips

CODE:

<tooltip content="Lorem ipsum dolor sit amet" placement="top">
  <button class="btn btn-secondary">Popover on top</button>
</tooltip>
<tooltip content="Lorem ipsum dolor sit amet" placement="left">
  <button class="btn btn-secondary">Popover on left</button>
</tooltip>
<tooltip content="Lorem ipsum dolor sit amet" placement="right">
  <button class="btn btn-secondary">Popover on right</button>
</tooltip>
<tooltip content="Lorem ipsum dolor sit amet" placement="bottom">
  <button class="btn btn-secondary">Popover on bottom</button>
</tooltip>
<hr />
Trigger
<p>
  <tooltip content="Lorem ipsum dolor sit amet" placement="top" trigger="click">
    <button class="btn btn-secondary">Click</button>
  </tooltip>
  <br />
  <br />
  <tooltip content="Lorem ipsum dolor sit amet" placement="top" trigger="focus">
    <input placeholder="Focus"></input>
  </tooltip>
</p>

**Markdown**:
<tooltip content="*Hello* **World**">
  <a href="">Hover me</a>
</tooltip>
<br />

**Free Text**:
<tooltip content="coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules."><i>coupling</i></tooltip>

OUTPUT:

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Trigger

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Markdown: Hello World Hover me

Free Text: coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.coupling

Using trigger for Tooltip:

CODE:

More about <trigger for="tt:trigger_id">trigger</trigger>.
<tooltip id="tt:trigger_id" content="This tooltip triggered by a trigger"></tooltip>
<br>
This is the same <trigger for="tt:trigger_id">trigger</trigger> as last one.

OUTPUT:

More about trigger. This tooltip triggered by a trigger
This is the same trigger as last one.

More about triggers


Options

Name Type Default Description
trigger String hover How the tooltip is triggered.
Supports: click, focus, hover.
content String '' Text content of the tooltip.
placement String top How to position the tooltip.
Supports: top, left, right, bottom.
Hover <tooltip content="An explanation, **supports simple Markdown**">here</tooltip> to see a tooltip.

Hover An explanation, supports simple Markdownhere to see a tooltip.


Popovers

CODE:

<popover effect="fade" content="Lorem ipsum dolor sit amet" placement="top">
  <button class="btn btn-secondary">Popover on top</button>
</popover>
<popover effect="fade" content="Lorem ipsum dolor sit amet" placement="left">
  <button class="btn btn-secondary">Popover on left</button>
</popover>
<popover effect="fade" content="Lorem ipsum dolor sit amet" placement="right">
  <button class="btn btn-secondary">Popover on right</button>
</popover>
<popover effect="fade" content="Lorem ipsum dolor sit amet" placement="bottom">
  <button class="btn btn-secondary">Popover on bottom</button>
</popover>
<hr>
<h4 class="no-index">Header</h4>
<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="top">
  <button class="btn btn-secondary">Popover on top</button>
</popover>
<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="left">
  <button class="btn btn-secondary">Popover on left</button>
</popover>
<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="right">
  <button class="btn btn-secondary">Popover on right</button>
</popover>
<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="bottom">
  <button class="btn btn-secondary">Popover on bottom</button>
</popover>
<hr />
<h4 class="no-index">Trigger</h4>
<p>
  <popover effect="scale" header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="hover">
    <button class="btn btn-secondary">Mouseenter</button>
  </popover>
</p>
<h4 class="no-index">Markdown</h4>
<p>
  <popover effect="scale" header="**Emoji header** :rocket:" content="!!emoji!! content :cat:">
    <button class="btn btn-secondary">Hover</button>
  </popover>
</p>
<h4 class="no-index">Content using slot</h4>
<popover effect="scale" header="**Emoji header** :rocket:">
  <div slot="content">
    This is a long content...
  </div>
  <button class="btn btn-secondary">Hover</button>
</popover>
<br />
<br />
<h4 class="no-index">Wrap Text</h4>
<popover header="false" content="Nice!">What do you say</popover>

OUTPUT:

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
HeaderLorem ipsum dolor sit amet HeaderLorem ipsum dolor sit amet HeaderLorem ipsum dolor sit amet HeaderLorem ipsum dolor sit amet

Trigger

HeaderLorem ipsum dolor sit amet

Markdown

Emoji header 🚀emoji content 🐱

Content using slot

Emoji header 🚀
This is a long content...


Wrap Text

falseNice!What do you say

Using trigger for Popover:

CODE:

More about <trigger for="pop:trigger_id">trigger</trigger>.
<popover id="pop:trigger_id" content="This popover is triggered by a trigger"></popover>
<br>
This is the same <trigger for="pop:trigger_id">trigger</trigger> as last one.

OUTPUT:

More about trigger. This popover is triggered by a trigger
This is the same trigger as last one.

More about triggers


Options

Name Type Default Description
trigger String hover How the Popover is triggered.
Supports: click, focus, hover.
header String '' Popover header, supports inline markdown text.
content String '' Popover content, supports inline markdown text.
placement String top How to position the Popover.
Supports: top, left, right, bottom.
Hover over the <trigger for="pop:context-target">keyword</trigger> to see the popover.

<popover id="pop:context-target" header="Popover header" placement="top">
<div slot="content">

description :+1:

</div>
</popover>

Hover over the keyword to see the popover.

Popover header

description 👍


Modals

Modals are to be used together with the Trigger component for activation.

CODE:

More about <trigger for="modal:loremipsum">trigger</trigger>.
<modal header="**Modal header** :rocket:" id="modal:loremipsum">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</modal>
<br>
This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.

<trigger for="modal:centered">This is a trigger for a centered modal</trigger>.

<modal header="**Centered** :rocket:" id="modal:centered" center>
  Centered
</modal>

<trigger for="modal:ok-text">This is a trigger for a modal with a custom OK button</trigger>.

<modal header="OK button visible!" id="modal:ok-text" ok-text="Custom OK">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</modal>

OUTPUT:

More about trigger.


This is the same trigger as last one.

This is a trigger for a centered modal.

This is a trigger for a modal with a custom OK button.

More about triggers


Options

Name type Default Description
header [S] String '' Header of the Modal component. Supports inline markdown text.
footer
modal-footer
(deprecated)
Slot empty Specifying this will override the ok-text attribute, and the OK button will not render.
ok-text String '' Text for the OK button.
effect String zoom Supports: zoom, fade.
id String Used by Trigger to activate the Modal by id.large
small Boolean false Creates a small Modal.
large Boolean false Creates a large Modal.
center Boolean false Vertically centers the modal (in addition to the horizontal centering by default).
backdrop Boolean true Enables closing the Modal by clicking on the backdrop.
Click <trigger trigger="click" for="modal:unused">here</trigger> to open a modal.
<modal header="Modal header" id="modal:unused">
    Modal content
</modal>

Hover here to open a modal.