Corex · Elixir Phoenix Framework UI Library

Semantic

Use class="ui-{role}" to set the semantic palette of a tooltip.

Available options: accent, alert, brand, info, success

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

Variant

Variant modifiers control tooltip surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add ui-solid for a filled surface.

    <.tooltip class="tooltip">
  <:trigger>Subtle (default)</:trigger>
  <:content>Subtle (default)</:content>
</.tooltip>
<.tooltip class="tooltip ui-solid">
  <:trigger>Solid</:trigger>
  <:content>Solid</:content>
</.tooltip>

Semantic × variant

Combine semantic palette and variant treatment on the same host, for example tooltip ui-accent ui-solid.

    <.tooltip class="tooltip">
        <:trigger>Base</:trigger>
        <:content>Base</:content>
      </.tooltip>
<.tooltip class="tooltip ui-solid">
        <:trigger>Base</:trigger>
        <:content>Base</:content>
      </.tooltip>
<.tooltip class="tooltip ui-accent">
        <:trigger>Accent</:trigger>
        <:content>Accent</:content>
      </.tooltip>
<.tooltip class="tooltip ui-accent ui-solid">
        <:trigger>Accent</:trigger>
        <:content>Accent</:content>
      </.tooltip>
<.tooltip class="tooltip ui-alert">
        <:trigger>Alert</:trigger>
        <:content>Alert</:content>
      </.tooltip>
<.tooltip class="tooltip ui-alert ui-solid">
        <:trigger>Alert</:trigger>
        <:content>Alert</:content>
      </.tooltip>
<.tooltip class="tooltip ui-brand">
        <:trigger>Brand</:trigger>
        <:content>Brand</:content>
      </.tooltip>
<.tooltip class="tooltip ui-brand ui-solid">
        <:trigger>Brand</:trigger>
        <:content>Brand</:content>
      </.tooltip>
<.tooltip class="tooltip ui-info">
        <:trigger>Info</:trigger>
        <:content>Info</:content>
      </.tooltip>
<.tooltip class="tooltip ui-info ui-solid">
        <:trigger>Info</:trigger>
        <:content>Info</:content>
      </.tooltip>
<.tooltip class="tooltip ui-success">
        <:trigger>Success</:trigger>
        <:content>Success</:content>
      </.tooltip>
<.tooltip class="tooltip ui-success ui-solid">
        <:trigger>Success</:trigger>
        <:content>Success</:content>
      </.tooltip>

Size

Use class="ui-size-{size}" to set the size of a tooltip.

Available options: xs, sm, md (default), lg, xl

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

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a tooltip.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

    <.tooltip class="tooltip ui-rounded-none">
  <:trigger>None</:trigger>
  <:content>ui-rounded-none</:content>
</.tooltip>
<.tooltip class="tooltip ui-rounded-sm">
  <:trigger>SM</:trigger>
  <:content>ui-rounded-sm</:content>
</.tooltip>
<.tooltip class="tooltip ui-rounded-md">
  <:trigger>MD</:trigger>
  <:content>ui-rounded-md</:content>
</.tooltip>
<.tooltip class="tooltip ui-rounded-lg">
  <:trigger>LG</:trigger>
  <:content>ui-rounded-lg</:content>
</.tooltip>
<.tooltip class="tooltip ui-rounded-xl">
  <:trigger>XL</:trigger>
  <:content>ui-rounded-xl</:content>
</.tooltip>
<.tooltip class="tooltip ui-rounded-full">
  <:trigger>Full</:trigger>
  <:content>ui-rounded-full</:content>
</.tooltip>