تنسيق Tooltip ·

    <div class="layout__row flex-wrap gap-2">
  <.tooltip class="tooltip">
    <:trigger>Default</:trigger>
    <:content>Neutral surface</:content>
  </.tooltip>
  <.tooltip class="tooltip tooltip--accent">
    <:trigger>Accent</:trigger>
    <:content>tooltip--accent</:content>
  </.tooltip>
  <.tooltip class="tooltip tooltip--brand">
    <:trigger>Brand</:trigger>
    <:content>tooltip--brand</:content>
  </.tooltip>
  <.tooltip class="tooltip tooltip--alert">
    <:trigger>Alert</:trigger>
    <:content>tooltip--alert</:content>
  </.tooltip>
  <.tooltip class="tooltip tooltip--success">
    <:trigger>Success</:trigger>
    <:content>tooltip--success</:content>
  </.tooltip>
  <.tooltip class="tooltip tooltip--info">
    <:trigger>Info</:trigger>
    <:content>tooltip--info</:content>
  </.tooltip>
  <.tooltip class="tooltip tooltip--selected">
    <:trigger>Selected</:trigger>
    <:content>tooltip--selected</:content>
  </.tooltip>
</div>

  

    <div class="layout__row flex-wrap gap-2">
  <.tooltip class="tooltip tooltip--sm">
    <:trigger>Sm</:trigger>
    <:content>tooltip--sm</:content>
  </.tooltip>
  <.tooltip class="tooltip tooltip--md">
    <:trigger>Md</:trigger>
    <:content>tooltip--md</:content>
  </.tooltip>
  <.tooltip class="tooltip tooltip--lg">
    <:trigger>Lg</:trigger>
    <:content>tooltip--lg</:content>
  </.tooltip>
  <.tooltip class="tooltip tooltip--xl">
    <:trigger>Xl</:trigger>
    <:content>tooltip--xl</:content>
  </.tooltip>
</div>

  

    <div class="layout__row flex-wrap gap-2">
  <.tooltip class="tooltip tooltip--text-sm">
    <:trigger>Text sm</:trigger>
    <:content>tooltip--text-sm</:content>
  </.tooltip>
  <.tooltip class="tooltip tooltip--text-xl">
    <:trigger>Text xl</:trigger>
    <:content>tooltip--text-xl</:content>
  </.tooltip>
  <.tooltip class="tooltip tooltip--text-2xl">
    <:trigger>Text 2xl</:trigger>
    <:content>tooltip--text-2xl</:content>
  </.tooltip>
  <.tooltip class="tooltip tooltip--text-4xl">
    <:trigger>Text 4xl</:trigger>
    <:content>tooltip--text-4xl</:content>
  </.tooltip>
</div>