context-selection-tooltip

A small library that shows a tooltip when the user selects text on the page: it first shows a "Thinking…" state, calls your API with the selected text, then binds the API response to the tooltip.

Works in React and Angular, or in any app via the core API.

Repository: github.com/higunjan/tooltip-library

Install

npm install context-selection-tooltip

API: API Key and Context only

The library sends only API Key and Context to the API—no other parameters.

• Request: POST with JSON body: { apiKey, context }.
  context is the selected text (sent automatically). You only provide apiKey in the config.

• API key: Get your key from the developer portal (portal URL provided when the API is deployed). Put it in the config as apiKey.

• Endpoint: Default is http://localhost:3000/api/context. For production, set apiUrl in config to your deployed API URL.

Quick start

React

Load the tooltip once in your app (e.g. in App.tsx). You only need your API key; context is sent automatically.

Option 1: Hook

import { useMemo } from 'react';
import { useSelectionTooltip } from 'context-selection-tooltip/react';

function App() {
  const tooltipConfig = useMemo(() => ({
    apiKey: 'YOUR_API_KEY', // from developer portal
    thinkingLabel: 'Thinking…',
  }), []);
  useSelectionTooltip(tooltipConfig);
  return <div>{/* your app */}</div>;
}

Option 2: Provider

import { SelectionTooltipProvider } from 'context-selection-tooltip/react';

function App() {
  return (
    <SelectionTooltipProvider
      config={{
        apiKey: 'YOUR_API_KEY',
        thinkingLabel: 'Thinking…',
      }}
    >
      {/* your app */}
    </SelectionTooltipProvider>
  );
}

Angular

1. Provide the service (e.g. in app.config.ts or a component):

import { ApplicationConfig } from '@angular/core';
import { SelectionTooltipService } from 'context-selection-tooltip/angular';

export const appConfig: ApplicationConfig = {
  providers: [SelectionTooltipService],
};

2. Initialize it in your root component:

import { Component, OnInit, inject } from '@angular/core';
import { SelectionTooltipService } from 'context-selection-tooltip/angular';

@Component({ ... })
export class AppComponent implements OnInit {
  private tooltip = inject(SelectionTooltipService);

  ngOnInit() {
    this.tooltip.init({
      apiKey: 'YOUR_API_KEY',
      thinkingLabel: 'Thinking…',
    });
  }
}

Vanilla / any framework

import { initSelectionTooltip } from 'context-selection-tooltip';

const cleanup = initSelectionTooltip({
  apiKey: 'YOUR_API_KEY',
  thinkingLabel: 'Thinking…',
});

// When you want to tear down:
cleanup();

Overriding the API URL (e.g. production)

initSelectionTooltip({
  apiKey: 'YOUR_API_KEY',
  apiUrl: 'https://api.yourdomain.com/api/context',
});

Config options

| Option | Type | Description | |--------|------|-------------| | apiKey | string | Your API key from the developer portal. Sent in the request body with context. | | apiUrl | string \| (selectedText: string) => string | Optional. API endpoint. Default: http://localhost:3000/api/context. Override for production. | | getRequestOptions | (selectedText: string) => RequestInit | Optional. Custom fetch options. Default: POST with body { apiKey, context }. | | parseResponse | (response: unknown) => string \| Promise<string> | Optional. Map API response to tooltip text. Default: reads text, result, content, message, or data from JSON, or stringifies. | | thinkingLabel | string | Optional. Label shown while waiting. Default: "Thinking…". | | getErrorMessage | (error: unknown) => string | Optional. Map errors to tooltip message. | | onResult | (selectedText: string, result: string) => void | Optional. Called when the API returns successfully. | | onError | (selectedText: string, error: unknown) => void | Optional. Called when the request fails. |

Example: custom response parsing

useSelectionTooltip({
  apiKey: 'YOUR_API_KEY',
  parseResponse: (res) => (res as { summary: string }).summary,
  thinkingLabel: 'Analyzing…',
});