Smart UI React targets React 18+ and current Node LTS for tooling; use TypeScript templates when you want typed props and events.

Demo source (Smart UI repo): react/source/tooltip/basic/App.jsx

npm create vite@latest my-smart-app -- --template react-ts

```
cd my-smart-app
```
then
```
npm install
```

npm install smart-webcomponents-react

Open src/App.tsx (or App.jsx if you chose JavaScript). The snippet below matches Smart UI React demos for this widget:

import 'smart-webcomponents-react/source/styles/smart.default.css';
import './App.css';
import React, { useRef } from "react";
import { Button } from 'smart-webcomponents-react/button';
import { RadioButton } from 'smart-webcomponents-react/radiobutton';
import { Tooltip } from 'smart-webcomponents-react/tooltip';

const App = () => {
  const tooltip = useRef(null);

  const handleChange = (position) => {
    if (tooltip.current) {
      tooltip.current.position = position;
    }
  };

  return (
    <div>
      <Button id="button">Button</Button>
      <Tooltip ref={tooltip} id="tooltip" selector="button" arrow>
        This is a tooltip for smartButton
      </Tooltip>
      <div className="options">
        <h3>Tooltip Position:</h3>
        <RadioButton enableContainerClick checked onChange={() => handleChange('top')}>
          Top
        </RadioButton>
        <br />
        <RadioButton enableContainerClick onChange={() => handleChange('bottom')}>
          Bottom
        </RadioButton>
        <br />
        <RadioButton enableContainerClick onChange={() => handleChange('left')}>
          Left
        </RadioButton>
        <br />
        <RadioButton enableContainerClick onChange={() => handleChange('right')}>
          Right
        </RadioButton>
        <br />
      </div>
    </div>
  );
};

export default App;

npm run dev

Open the URL Vite prints (often http://localhost:5173/).

Alternative: Next.js

Create an app with npx create-next-app@latest (Pages Router or App Router). Install the same package (npm install smart-webcomponents-react), then reuse the imports and default export from step 3 in pages/_app.tsx, the App Router root app/layout.tsx, or your top-level layout component so styles and the widget tree load once.

Types ship with smart-webcomponents-react. Import the component and prop types:

import type { Tooltip, TooltipProps } from 'smart-webcomponents-react/tooltip';

The generated wrappers expose on* callbacks (for example onChange) whose arguments are standard DOM Event values unless the widget typings narrow them further.

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.

Getting Started with React Tooltip Component

1 Create a Vite + React + TypeScript app

2 Install Smart UI for React