Pattern Library

{% load cotton %}

<div class="component-variants">
    <h1>Tooltip Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>

        <div class="padding-4">
            {% for tooltip in variant.tooltips %}
            <div class="margin-2 display-inline-block">
                {% cotton tooltip tooltip_text="{{ tooltip.tooltip_text }}" position="{{ tooltip.position }}" data_classes="{{ tooltip.data_classes }}" text="{{ tooltip.text }}" %}{% endcotton %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

name: Tooltip
context:
  variants:
    - title: "Standard Tooltip"
      tooltips:
        - tooltip_text: "Top"
          position: "top"
          text: "Show on top"
        - tooltip_text: "Right"
          position: "right"
          text: "Show on right"
        - tooltip_text: "Bottom"
          position: "bottom"
          text: "Show on bottom"
        - tooltip_text: "Left"
          position: "left"
          text: "Show on left"
    - title: "Tooltip with Utility Classes"
      tooltips:
        - tooltip_text: "Top with custom width"
          position: "top"
          data_classes: "width-full tablet:width-auto"
          text: "Show on top"
        - tooltip_text: "Bottom with custom width"
          position: "bottom"
          data_classes: "width-full tablet:width-auto"
          text: "Show on bottom"