Overlays

Components that appear above other content.

Tooltip

Contextual information on hover. Position with .bottom, .left, or .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>