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	`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.

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

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:

content slot
content attribute
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>

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>

Image & Diagram Components

Navigation Components