How to use Tippy.js with Typescript (without React, jQuery, etc)

Question

I need a full example on how to use Tippy.js with Typescript. I see in all examples lines similar to

import tippy, {Tippy, Props, Plugin, LifecycleHooks} from 'tippy.js';
tippy('[data-tippy-content]');

However, I get the error message

This expression is not callable.
  Type 'typeof import("/Users/***/node_modules/tippy.js/index")' has no call signatures.ts(2349)

That seems to make sense, as the type definition has these two lines:

declare const tippy: Tippy;
// other stuff
export default tippy;

Tippy itself is an interface, so the examples seem outdated or based on yet other libraries.

My tsconfig.json is as following:

   {
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "useDefineForClassFields": false,
    "module": "ES2022",
    "rootDir": "./src",
    "moduleResolution": "Node16",
    "paths": {
      "/*.ts": [
        "./src/*.ts"
      ],
      "/*.js": [
        "./src/*.js"
      ],
      "/*": [
        "./*.ts",
        "./*.js",
        "./*"
      ]
    },
    "resolveJsonModule": true,
    "allowJs": true,
    "checkJs": true,
    "declaration": true,
    "declarationMap": true,
    "emitDeclarationOnly": true,
    "sourceMap": true,
    "outDir": "./types",
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "useUnknownInCatchVariables": true,
    "alwaysStrict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitOverride": true,
    "allowUnusedLabels": false,
    "plugins": [
      {
        "name": "ts-lit-plugin"
      }
    ]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Is there any reason in particular why you deviate from the official documentation? — maio290
– maio290, Commented Jan 23, 2023 at 20:33
It doesn't work :-) (see error message). @yevt below uses the same code in Typescript and it seems to work, but I don't understand why. — Wizard of Kneup
– Wizard of Kneup, Commented Jan 23, 2023 at 21:01
Then it's related to your environment, frankly speaking. I mean there's no native TypeScript anyway, so what is your setup here? Using npm, I had no issue at all. — maio290
– maio290, Commented Jan 23, 2023 at 21:03
When I use const myTippy = tippy as any and then myTippy('#myButton', { content: "I'm a Tippy tooltip!", }); then it works. I need to trick the compiler, and it must be a setting. — Wizard of Kneup
– Wizard of Kneup, Commented Jan 23, 2023 at 21:25

yevt · Accepted Answer · 2023-01-23 20:27:52Z

2

Minimalistic example:

#index.ts
import tippy from 'tippy.js';

tippy('#myButton', {
  content: "I'm a Tippy tooltip!",
});

<!-- index.html -->
<button id="myButton">My Button</button>

https://stackblitz.com/edit/typescript-rzqrnd?file=index.ts

answered Jan 23, 2023 at 20:27

yevt

8562 gold badges9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wizard of Kneup Over a year ago

Thanks! Why does this not create the same error than in my code base? tippy is still just an interface, but you use it here as a function!

yevt Over a year ago

tippy is a function. And it's the very first example from the official doc page verbatim. @WizardofKneup

Collectives™ on Stack Overflow

How to use Tippy.js with Typescript (without React, jQuery, etc)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related