Pop-Up Components

User Guide → Pop-Up Components

Pop-Ups

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">Tooltip on top</button>
</tooltip>
<tooltip content="Lorem ipsum dolor sit amet" placement="left">
  <button class="btn btn-secondary">Tooltip on left</button>
</tooltip>
<tooltip content="Lorem ipsum dolor sit amet" placement="right">
  <button class="btn btn-secondary">Tooltip on right</button>
</tooltip>
<tooltip content="Lorem ipsum dolor sit amet" placement="bottom">
  <button class="btn btn-secondary">Tooltip 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>
</p>
<p>
  <tooltip content="Lorem ipsum dolor sit amet" placement="top" trigger="focus">
    <input placeholder="Focus"></input>
  </tooltip>
</p>
<hr />

**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:


Trigger


Markdown:

Free Text:

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 is the same trigger as last one.

More about triggers


Options

Name Type Default Description
trigger String hover focus How the tooltip is triggered.
Supports: click, focus, hover, or any space-separated combination of these.
content[S] 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 to see a tooltip.


Popovers

CODE:

<popover content="Lorem ipsum dolor sit amet" placement="top">
  <button class="btn btn-secondary">Popover on top</button>
</popover>
<popover content="Lorem ipsum dolor sit amet" placement="left">
  <button class="btn btn-secondary">Popover on left</button>
</popover>
<popover content="Lorem ipsum dolor sit amet" placement="right">
  <button class="btn btn-secondary">Popover on right</button>
</popover>
<popover 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 header="Header" content="Lorem ipsum dolor sit amet" placement="top">
  <button class="btn btn-secondary">Popover on top</button>
</popover>
<popover header="Header" content="Lorem ipsum dolor sit amet" placement="left">
  <button class="btn btn-secondary">Popover on left</button>
</popover>
<popover header="Header" content="Lorem ipsum dolor sit amet" placement="right">
  <button class="btn btn-secondary">Popover on right</button>
</popover>
<popover 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>
<div>
  <popover header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="hover">
    <button class="btn btn-secondary">Mouseenter</button>
  </popover>
</div>
<h4 class="no-index">Markdown</h4>
<div>
  <popover header="**Emoji header** :rocket:" content="!!emoji!! content :cat:">
    <button class="btn btn-secondary">Hover</button>
  </popover>
</div>
<h4 class="no-index">Content using slot</h4>
<div>
  <popover header="**Emoji header** :rocket:">
    <div slot="content">
      This is a long content...
    </div>
    <button class="btn btn-secondary">Hover</button>
  </popover>
</div>
<h4 class="no-index">Content using src</h4>
<div>
  <popover header="From a HTML file" src="/userGuide/syntax/extra/loadContent.html#fragment">
    This is loaded from a .html file
  </popover>
</div>
<div>
  <popover header="From a MarkDown file" src="/userGuide/formattingContents.md#overview">
    This is loaded from a .md file
  </popover>
</div>
<h4 class="no-index">Wrap Text</h4>
<div>
  <popover header="false" content="Nice!">What do you say</popover>
</div>

OUTPUT:



Trigger

Markdown

Content using slot

Content using src

Wrap Text

Add {{ baseUrl }} to make your URLs absolute links if they may be reused in different contexts

Make an internal relative link an absolute link by adding {{ baseUrl }} in front of the path. This allows the link to always point to the same target. Keep this in mind when putting content with links that is reused (eg: via <include>). This is because when your content is re-used, a relative link may no longer point to where you want it to.

Example of using absolute links in <include>



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 is the same trigger as last one.

More about triggers



Options

Name Type Default Description
trigger String hover focus How the Popover is triggered.
Supports: click, focus, hover, or any space-separated combination of these.
header[S] String '' Popover header, supports MarkDown text.
content[S] String '' Popover content, supports MarkDown text.
src String The URL to the remote page to be loaded as the content of the popover.
Both .md and .html are accepted.
placement String top How to position the Popover.
Supports: top, left, right, bottom.

MarkBind supports the src attribute, content attribute and content slot for popovers. Usually, only one of these would be used at a time.

If multiple of these are used, MarkBind will prioritise in the following order:

  1. content slot
  2. content attribute
  3. src attribute
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.


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 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.
Note: Ensure id for each Modal is unique.
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.