Pop-Up Components
User Guide → Pop-Up ComponentsThe 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.
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.
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.
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:
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.
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.
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
slotcontent
attributesrc
attributeHover 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 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 a trigger for a centered modal.
This is a trigger for a modal with a custom OK button.
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.