Understanding vue-directives

I would like PhpStorm to recognize a tooltip directive.

`v-tooltip` is recognized with the content of my `web-types.json`, but `v-tooltip.top` for example not:

```json
{
"$schema": "http://json-schema.org/draft-04/schema#",
"framework": "vue",
"js-types-syntax": "typescript",
"description-markup": "markdown",
"framework-config": {
"enable-when": {
"file-extensions": [
"vue"
]
}
},
"contributions": {
"html": {
"vue-directives": [
{
"name": "tooltip",
"description": "Creating a tooltip with floating-vue",
"doc-url": "https://floating-vue.starpad.dev/guide/directive",
"attribute-value": {
"type": "any",
"required": true
},
"vue-modifiers": [
{
"name": "top",
"description": "Positions the tooltip on the top of the trigger element"
},
{
"name": "right",
"description": "Positions the tooltip on the right of the trigger element"
},
{
"name": "bottom-start",
"description": "Positions the tooltip on the bottom-start of the trigger element"
}
]
}
]
}
}
}
```

How can I implement it so that my IDE also recognizes `v-tooltip.top`, `v-tooltip.bottom`, `v-tooltip.right` etc.?