@k8slens/lds-tips

Tips/tour component for the Lens Design System – display contextual hints and guided tours.

Installation

npm install @k8slens/lds-tips @k8slens/lds @k8slens/lds-tokens

Setup

import "@k8slens/lds-tokens/lib/electron/font-face.css";
import "@k8slens/lds/lib/es/index.css";
import "@k8slens/lds-tips/lib/es/index.css";

Usage

import { Tips } from "@k8slens/lds-tips";

import tipStore from "./path-to-my/tip-store";

export const Component = () => (
  <Tips
    tours={tipStore.tours}
    setNextStepNumber={tipStore.setNextStepNumber}
    getActiveStep={tipStore.getActiveStep}
    setSkipAll={tipStore.setSkipAll}
    skipped={tipStore.skipAll}
  />
);

Example using MobX

Tours

// tours.ts
import type { Tour } from "@k8slens/lds-tips/lib/es/Tips/Tips";

const tours: Array<Tour> = [
  {
    id: "tour-1",
    steps: [
      {
        id: "first-tip",
        selector: "#target-element-1",
        theme: "important",
        content: (
          <>
            <h3>This is the first tip</h3>
            <p>Tip Contents</p>
          </>
        ),
      },
      {
        id: "second-tip",
        selector: "#target-element-2",
        theme: "important",
        content: (
          <>
            <h3>This is the second tip</h3>
            <p>Another content</p>
          </>
        ),
      },
    ],
  },
];

export default tours;

TipStore

// tips-store.ts
import { action, makeObservable, observable } from "mobx";

import type { Tour, TipsProps } from "@k8slens/lds-tips/lib/es/Tips/Tips";

import tours from "./tours";

type ActiveSteps = { [key: string]: number };

type TipStoreModel = {
  skipAll: TipsProps["skipAll"];
  activeSteps: ActiveSteps;
};

export class TipStore {
  @observable
  store: TipStoreModel = {
    skipAll: false,
    activeSteps: {},
  };
  tours: Array<Tour> = tours;

  constructor() {
    makeObservable(this);
  }

  @action
  setSkipAll: TipsProps["setSkipAll"] = () => {
    this.store.skipAll = true;
  };

  @action
  setNextStepNumber: TipsProps["setNextStepNumber"] = (tourId: string) => {
    let nextStep = 1;
    if (typeof this.store.activeSteps[tourId] === "number") {
      nextStep += this.store.activeSteps[tourId];
    }

    this.store.activeSteps = {
      ...this.store.activeSteps,
      [tourId]: nextStep,
    };

    return nextStep;
  };

  getActiveStep: TipsProps["getActiveStep"] = (tourId: string) => {
    return this.store.activeSteps[tourId] || 0;
  };
}

Component

// Component.tsx
import React from "react";
import { observer } from "mobx-react";

import { Tips } from "@k8slens/lds-tips";

import { TipStore } from "./TipStore";

interface Props {
  tipStore: TipStore | null;
}

export const Component = observer(({ tipStore }: Props) => {
  if (!tipStore) {
    return null;
  }

  return (
    <Tips
      tours={tipStore.tours}
      setNextStepNumber={tipStore.setNextStepNumber}
      getActiveStep={tipStore.getActiveStep}
      setSkipAll={tipStore.setSkipAll}
      skipped={tipStore.store.skipAll}
    />
  );
});

Documentation

Browse examples at lens-design-system.k8slens.dev.

AI Assistance

This package includes an llms.txt file with API documentation optimized for LLMs. Add to your project's AI configuration (e.g., AGENTS.md or CLAUDE.md):

Read node_modules/@k8slens/lds-tips/llms.txt for tips/tours API reference.

Use the LDS Tips component instead of custom tooltip implementations.