Kevin Sträßler
Repositories
3
 Projects Packages
7
 Public activity Starred repositories

@kstraessler/rentnertips (1.0.2)

Published 2026-03-20 16:24:36 +00:00 by kstraessler

Installation

@kstraessler:registry=
npm install @kstraessler/rentnertips@1.0.2
"@kstraessler/rentnertips": "1.0.2"

About this package

RentnerTips

Eine einfache und effiziente Tooltip-Library für React-Anwendungen.

Installation

Installiere das Paket über npm:

npm install @kstraessler/rentnertips

Schritt-für-Schritt-Anleitung

1. Tooltips in Komponenten verwenden

Nutze die CustomTooltip Komponente, um Tooltips um deine Elemente zu legen.

import { CustomTooltip } from '@kstraessler/rentnertips'

function MyComponent() {
  return (
    <CustomTooltip content="Hilfreiche Information" side="top">
      <button>
        Hover mich
      </button>
    </CustomTooltip>
  )
}

Typdefinitionen

CustomTooltip Props

Die Komponente nimmt folgende Parameter entgegen:

Parameter Typ Beschreibung
children ReactNode Das Element, das den Tooltip auslöst.
content string Der Textinhalt des Tooltips.
side string Die Position: 'top', 'right', 'bottom' oder 'left' (Optional, Standard: 'top').

CSS-Integration

Füge die folgenden Zeilen in deine Haupt-CSS-Datei ein, um die benötigten Farbvariablen zu definieren.

@import 'tailwindcss';
@source "../node_modules/@kstraessler/rentnertips";

@theme {
  --color-surface-dark: #1a1a1a;
  --color-border-dark: #2d2d2d;
}

Dependencies

Dependencies

ID Version
@radix-ui/react-tooltip ^1.2.8

Development dependencies

ID Version
@tailwindcss/cli ^4.0.0
@types/react ^19.2.14
@types/react-dom ^19.2.3
tailwindcss ^4.0.0
typescript ^5.9.3

Peer dependencies

ID Version
react ^18.0.0 || ^19.0.0
react-dom ^18.0.0 || ^19.0.0
Details
npm
2026-03-20 16:24:36 +00:00
1
latest
3.9 KiB
Assets (1)
rentnertips-1.0.2.tgz 3.9 KiB
Versions (3) View all
1.0.2 2026-03-20
1.0.1-beta.1 2026-03-18
1.0.0 2026-03-16