zobweyt Comments - Answer Overflow

zobweyt

Explore posts from servers

•Created by zobweyt on 10/13/2024 in #support

Using JSX in custom directives

I came up with this, but now it seems like you need to re-invent the whole <Tooltip> component

export default function tooltip(trigger: HTMLElement, title: Accessor<string>) {
  const [ref, setRef] = createSignal<HTMLElement | undefined>(undefined);

  onMount(() => {
    trigger.addEventListener("mouseover", () => {
      Portal({
        ref: setRef,
        children: title(),
      });
    });
  });

  createEffect(() => {
    trigger.addEventListener("mouseleave", () => {
      ref()?.remove();
    });
  });
}

export default function tooltip(trigger: HTMLElement, title: Accessor<string>) {
  const [ref, setRef] = createSignal<HTMLElement | undefined>(undefined);

  onMount(() => {
    trigger.addEventListener("mouseover", () => {
      Portal({
        ref: setRef,
        children: title(),
      });
    });
  });

  createEffect(() => {
    trigger.addEventListener("mouseleave", () => {
      ref()?.remove();
    });
  });
}

7 replies

SSolidJS

•Created by zobweyt on 10/13/2024 in #support

Using JSX in custom directives

I came up with this. However, it renders the whole element as a <Portal>. Can you render it in the same exact spot?

import { type Accessor, createSignal } from "solid-js";
import { render, Portal } from "solid-js/web";

import { Tooltip } from "@kobalte/core/tooltip";

export default function tooltip(el: HTMLElement, title: Accessor<string>) {
  Portal({
    get children() {
      return (
        <Tooltip>
          <Tooltip.Trigger as={"span"}>{el}</Tooltip.Trigger>
          <Tooltip.Portal>
            <Tooltip.Content>{title()}</Tooltip.Content>
          </Tooltip.Portal>
        </Tooltip>
      );
    },
  });
}

declare module "solid-js" {
  namespace JSX {
    interface DirectiveFunctions {
      tooltip: typeof tooltip;
    }
  }
}

function App() {
  const [count, setCount] = createSignal<number>(0);

  return (
    <button
      onClick={() => setCount((c) => c + 1)}
      use:tooltip="Push to increment count"
    >
      {count()}
    </button>
  );
}

render(() => <App />, document.getElementById("app")!);

import { type Accessor, createSignal } from "solid-js";
import { render, Portal } from "solid-js/web";

import { Tooltip } from "@kobalte/core/tooltip";

export default function tooltip(el: HTMLElement, title: Accessor<string>) {
  Portal({
    get children() {
      return (
        <Tooltip>
          <Tooltip.Trigger as={"span"}>{el}</Tooltip.Trigger>
          <Tooltip.Portal>
            <Tooltip.Content>{title()}</Tooltip.Content>
          </Tooltip.Portal>
        </Tooltip>
      );
    },
  });
}

declare module "solid-js" {
  namespace JSX {
    interface DirectiveFunctions {
      tooltip: typeof tooltip;
    }
  }
}

function App() {
  const [count, setCount] = createSignal<number>(0);

  return (
    <button
      onClick={() => setCount((c) => c + 1)}
      use:tooltip="Push to increment count"
    >
      {count()}
    </button>
  );
}

render(() => <App />, document.getElementById("app")!);

7 replies

SSolidJS

•Created by zobweyt on 10/13/2024 in #support

Using JSX in custom directives

How would you create a portal? What do you mean? Using document.appendChild()?

7 replies

SSolidJS

•Created by zobweyt on 8/8/2024 in #support

Endless "[vite] ✨ optimized dependencies changed. reloading"

it appears to be machine problem as it works fine on my laptop but not on my pc

5 replies

SSolidJS

•Created by zobweyt on 8/8/2024 in #support

Endless "[vite] ✨ optimized dependencies changed. reloading"

~ $ cmd /c ver

Microsoft Windows [Version 10.0.22621.3958]
~ $ pnpm -v
9.7.0

~ $ cmd /c ver

Microsoft Windows [Version 10.0.22621.3958]
~ $ pnpm -v
9.7.0

5 replies

SSolidJS

•Created by zobweyt on 8/8/2024 in #support

Endless "[vite] ✨ optimized dependencies changed. reloading"

am I missing something? why is this happening?

5 replies

SSolidJS

•Created by zobweyt on 8/8/2024 in #support

Endless "[vite] ✨ optimized dependencies changed. reloading"

here's complete video to reproduce this

5 replies

SSolidJS