Understanding vue-directives

[Muetze42]

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:

{
    "$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.?