G-Loot DS — tooltip responsive positioning

by Augustin Hiebel

HTML

<div className="tooltip-lg shadow-xl is-active w-72">
  <div className="flex items-center justify-between mb-2 gap-2">
    <h5 className="flex-1">Missions</h5>
    <ul className="flex gap-1.5">
      <li className="w-1.5 h-1.5 rounded-full bg-main" />
      <li className="w-1.5 h-1.5 rounded-full bg-main" />
      <li className="w-1.5 h-1.5 rounded-full bg-ui-400" />
      <li className="w-1.5 h-1.5 rounded-full bg-ui-400" />
      <li className="w-1.5 h-1.5 rounded-full bg-ui-400" />
    </ul>
    <button type="button" class="button button-ghost button-close button-sm">
      <span class="icon icon-e-remove" />
    </button>
  </div>
  <p className="text-sm mb-3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Morbi at eros scelerisque, luctus metus quis, lacinia dui.
    Vestibulum sit amet ipsum nunc.
  </p>
  <div className="border-t border-ui-500 pt-3 flex items-center justify-between">
    <a href="#" className="text-sm link">
      Skip
    </a>
    <div className="flex gap-1.5">
      <button className="button button-sm button-secondary">
        <span>Previous</span>
      </button>
      <button className="button button-sm button-primary">
        <span>Next</span>
      </button>
    </div>
  </div>
</div>