Dropdowns
CSS-only dropdown menus using hidden checkboxes.
<div class="dropdown">
<input type="checkbox" id="dropdown-basic" class="d-none">
<label for="dropdown-basic" class="btn btn-secondary">Dropdown <span aria-hidden="true">▾</span></label>
<div class="dropdown-content">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>Tooltips
Simple tooltips using data attributes and pseudo-elements. Available in different positions and styles.
Basic Tooltip
<button class="btn btn-primary" data-tooltip="This is a basic tooltip">
Hover me
</button>Tooltip Positions
<button data-tooltip="Top tooltip" data-tooltip-position="top">Top</button>
<button data-tooltip="Right tooltip" data-tooltip-position="right">Right</button>
<button data-tooltip="Bottom tooltip" data-tooltip-position="bottom">Bottom</button>
<button data-tooltip="Left tooltip" data-tooltip-position="left">Left</button>Accordion
Click the button to expand the content.
This is the content of the first accordion item.
This is the content of the second accordion item.
This is the content of the third accordion item.
<div class="accordion">
<input type="checkbox" class="accordion-toggle d-none" id="accordion-1">
<label for="accordion-1">Accordion Item 1</label>
<div class="accordion-content">
<p>This is the content of the first accordion item.</p>
<p>This is the content of the second accordion item.</p>
<p>This is the content of the third accordion item.</p>
</div>
</div>