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](https://atomiks.github.io/tippyjs/v6/getting-started/)? — maio290, Jan 23 '23 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, Jan 23 '23 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, Jan 23 '23 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, Jan 23 '23 at 21:25
I cannot reproduce it with your config. But well, if it works for you know, even better! Would love to know what the issue here actually is, strikes me as a bit weird honestly. — maio290, Jan 23 '23 at 22:36
It's getting weirder... `const myTippy = tippy as Tippy` (keep in mind that Tippy 6.3.7 defines `declare const tippy: Tippy;`) leads to error: `Conversion of type 'typeof import("/Users/***/node_modules/tippy.js/index")' to type 'Tippy' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type 'typeof import("/Users/***/node_modules/tippy.js/index")' is missing the following properties from type 'Tippy': currentInput, defaultProps, setDefaultPropsts(2352)` — Wizard of Kneup, Jan 25 '23 at 05:24

score 2 · Answer 1 · answered Jan 23 '23 at 20:27

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 '23 at 20:27

yevt

732
1
6
21

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! – Wizard of Kneup Jan 23 '23 at 20:59
`tippy` is a function. And it's the very first example from the official doc page verbatim. @WizardofKneup – yevt Jan 24 '23 at 12:18

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

1 Answers1