Overlays
Components that appear above other content.
Tooltip
Contextual information on hover. Position with .bottom, .left, or .right.
Top (default)
Tooltip on top
Bottom
Tooltip on bottom
Left
Tooltip on left
Right
Tooltip on right
Code
<!-- Top (default) -->
<span class="ip-tooltip">
<span>Hover me</span>
<span class="ip-tooltip-content">Tooltip text</span>
</span>
<!-- Bottom -->
<span class="ip-tooltip">
<span>Hover me</span>
<span class="ip-tooltip-content bottom">Tooltip text</span>
</span>
<!-- Left -->
<span class="ip-tooltip">
<span>Hover me</span>
<span class="ip-tooltip-content left">Tooltip text</span>
</span>
<!-- Right -->
<span class="ip-tooltip">
<span>Hover me</span>
<span class="ip-tooltip-content right">Tooltip text</span>
</span>
Modal
Dialog overlay with backdrop. Requires modal.js.
Code
<!-- Trigger -->
<button class="ip-btn-primary" data-modal="my-modal">Open Modal</button>
<!-- Backdrop -->
<div class="ip-modal-backdrop" id="my-modal-backdrop"></div>
<!-- Modal -->
<div class="ip-modal" id="my-modal">
<div class="ip-modal-header">
<span class="ip-modal-title">Modal Title</span>
<button class="ip-btn-icon" data-action="close">
<span class="ip-btn-icon-content">×</span>
</button>
</div>
<div class="ip-modal-body">
<p>Modal content goes here.</p>
</div>
<div class="ip-modal-footer">
<button class="ip-btn" data-action="close">Cancel</button>
<button class="ip-btn-primary">Confirm</button>
</div>
</div>
Size Variants
Code
<!-- Small modal -->
<div class="ip-modal ip-modal-sm">...</div>
<!-- Large modal -->
<div class="ip-modal ip-modal-lg">...</div>
<!-- Full screen modal -->
<div class="ip-modal ip-modal-full">...</div>