diff --git a/docs/directives.md b/docs/directives.md
index b7de2411e5..6a49863dae 100644
--- a/docs/directives.md
+++ b/docs/directives.md
@@ -1,4 +1,6 @@
-## Tooltip
+### Registration
+
+To use any directive, import and register it locally, for example:
 
 <!--
  - SPDX-FileCopyrightText: 2020-2024 Nextcloud GmbH and Nextcloud contributors
@@ -6,58 +8,24 @@
 -->
 
 ```js static
-import { Tooltip } from '@nextcloud/vue'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
-Vue.directive('tooltip', Tooltip)
+export default {
+    directives: {
+        Tooltip,
+    },
+}
 ```
+or in `<script setup>`:
 
-The tooltip directive is based on v-tooltip. For a full feature list see the projects [README](https://github.com/Akryum/v-tooltip/blob/master/README.md#directive)
-
-In the template, use the `v-tooltip` directive:
-
-```vue
-<a v-tooltip="'You have new messages.'">Hover me</a>
+```js static
+import vTooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 ```
 
-Of course, you can use a reactive property:
-
-```vue
-    <template>
-        <a v-tooltip="tooltipContent">Hover me</a>
-    </template>
-    <script>
-        export default {
-            computed: {
-                tooltipContent: () => 'You have new messages.'
-            }
-        }
-    </script>
-```
+You can also register any directive globally. But it is not recommended.
 
-You can specify the tooltip position as a modifier:
+```js static
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
-```vue
-<a v-tooltip.bottom="'You have new messages.'">Hover me</a>
-```
-The available positions are:
- - `'auto'`
- - `'auto-start'`
- - `'auto-end'`
- - `'top'`
- - `'top-start'`
- - `'top-end'`
- - `'right'`
- - `'right-start'`
- - `'right-end'`
- - `'bottom'`
- - `'bottom-start'`
- - `'bottom-end'`
- - `'left'`
- - `'left-start'`
- - `'left-end'`
-
-```vue
-<button v-tooltip="{content: 'I\'m a tooltip', show: true, placement: 'right'}">
-    I'm a button with a tooltip
-</button>
+Vue.directive('Tooltip', Tooltip)
 ```
diff --git a/docs/directives/focus.md b/docs/directives/focus.md
new file mode 100644
index 0000000000..a729fc01b4
--- /dev/null
+++ b/docs/directives/focus.md
@@ -0,0 +1,9 @@
+```js static
+import Focus from '@nextcloud/vue/dist/Directives/Focus.js'
+```
+
+Focus an element when it is mounted to DOM.
+
+```vue
+<input v-focus placeholder="I'm focused" />
+```
diff --git a/docs/directives/linkify.md b/docs/directives/linkify.md
new file mode 100644
index 0000000000..fa36988f6e
--- /dev/null
+++ b/docs/directives/linkify.md
@@ -0,0 +1,13 @@
+```js static
+import Linkify from '@nextcloud/vue/dist/Directives/Linkify.js'
+```
+
+Automatically make links in rendered text clickable.
+
+To use the directive, bind object with `linkify === true` and the text in the `text` property:
+
+```vue
+<template>
+    <p v-linkify="{ linkify: true, text: 'Read more about Nextcloud on https://nextcloud.com' }"></p>
+</template>
+```
\ No newline at end of file
diff --git a/docs/directives/tooltip.md b/docs/directives/tooltip.md
new file mode 100644
index 0000000000..5d1b50aa2f
--- /dev/null
+++ b/docs/directives/tooltip.md
@@ -0,0 +1,50 @@
+```js static
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+```
+
+Tooltip directive based on [v-tooltip](https://github.com/Akryum/v-tooltip).
+
+Note: it's preferred to use [native HTML title attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) instead for accessibility.
+
+## Usage
+
+In a component register the directive and use the `v-tooltip` in the template with static or dynamic value:
+
+```vue
+<template>
+    <button v-tooltip="'A tooltip text'">Hover me</button>
+</template>
+```
+
+You can specify the tooltip position as a modifier:
+
+```vue
+<button v-tooltip.bottom="'You have new messages.'">Hover me</button>
+```
+
+The available positions are:
+ - `'auto'`
+ - `'auto-start'`
+ - `'auto-end'`
+ - `'top'`
+ - `'top-start'`
+ - `'top-end'`
+ - `'right'`
+ - `'right-start'`
+ - `'right-end'`
+ - `'bottom'`
+ - `'bottom-start'`
+ - `'bottom-end'`
+ - `'left'`
+ - `'left-start'`
+ - `'left-end'`
+
+You can also specify more options. 
+
+```vue
+<button v-tooltip="{ content: 'I\'m a tooltip', show: true, placement: 'right' }">
+    I'm a button with a tooltip
+</button>
+```
+
+For a full documentation see: [v-tooltip/README](https://github.com/Akryum/v-tooltip/blob/master/README.md#directive).
diff --git a/styleguide.config.js b/styleguide.config.js
index decf4978db..fbbd5cafca 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -92,6 +92,21 @@ module.exports = async () => {
 			{
 				name: 'Directives',
 				content: 'docs/directives.md',
+				sectionDepth: 1,
+				sections: [
+					{
+						name: 'Focus',
+						content: 'docs/directives/focus.md',
+					},
+					{
+						name: 'Linkify',
+						content: 'docs/directives/linkify.md',
+					},
+					{
+						name: 'Tooltip',
+						content: 'docs/directives/tooltip.md',
+					},
+				],
 			},
 			{
 				name: 'Functions',
diff --git a/styleguide/global.requires.js b/styleguide/global.requires.js
index ce4e02f686..1c20d3bccf 100644
--- a/styleguide/global.requires.js
+++ b/styleguide/global.requires.js
@@ -8,8 +8,9 @@ import Vue from 'vue'
 import { isA11yActivation } from '../src/functions/a11y/index.ts'
 import { EmojiSkinTone, emojiSearch, emojiAddRecent, getCurrentSkinTone, setCurrentSkinTone } from '../src/functions/emoji/index.ts'
 import usernameToColor from '../src/functions/usernameToColor/index.js'
-
-import VTooltip from './../src/directives/Tooltip/index.js'
+import Tooltip from './../src/directives/Tooltip/index.js'
+import Focus from './../src/directives/Focus/index.js'
+import Linkify from './../src/directives/Linkify/index.js'
 
 import axios from '@nextcloud/axios'
 
@@ -157,7 +158,7 @@ window.NextcloudVueDocs = {
 	tags: '<?xml version="1.0"?><d:multistatus xmlns:d="DAV:" xmlns:s="http://sabredav.org/ns" xmlns:oc="http://owncloud.org/ns" xmlns:nc="http://nextcloud.org/ns"><d:response><d:href>/remote.php/dav/systemtags/</d:href><d:propstat><d:prop><oc:id/><oc:display-name/><oc:user-visible/><oc:user-assignable/><oc:can-assign/></d:prop><d:status>HTTP/1.1 404 Not Found</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/7</d:href><d:propstat><d:prop><oc:id>7</oc:id><oc:display-name>tag1</oc:display-name><oc:user-visible>true</oc:user-visible><oc:user-assignable>true</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/2</d:href><d:propstat><d:prop><oc:id>2</oc:id><oc:display-name>tag2</oc:display-name><oc:user-visible>false</oc:user-visible><oc:user-assignable>true</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/3</d:href><d:propstat><d:prop><oc:id>3</oc:id><oc:display-name>tag3</oc:display-name><oc:user-visible>true</oc:user-visible><oc:user-assignable>true</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/4</d:href><d:propstat><d:prop><oc:id>4</oc:id><oc:display-name>important</oc:display-name><oc:user-visible>true</oc:user-visible><oc:user-assignable>true</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/1</d:href><d:propstat><d:prop><oc:id>1</oc:id><oc:display-name>secret</oc:display-name><oc:user-visible>true</oc:user-visible><oc:user-assignable>false</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/5</d:href><d:propstat><d:prop><oc:id>5</oc:id><oc:display-name>test</oc:display-name><oc:user-visible>true</oc:user-visible><oc:user-assignable>false</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/6</d:href><d:propstat><d:prop><oc:id>6</oc:id><oc:display-name>test2</oc:display-name><oc:user-visible>false</oc:user-visible><oc:user-assignable>false</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response></d:multistatus>',
 }
 
-// Exported Functions
+// Functions
 window.isA11yActivation = isA11yActivation
 window.EmojiSkinTone = EmojiSkinTone
 window.emojiSearch = emojiSearch
@@ -166,4 +167,7 @@ window.getCurrentSkinTone = getCurrentSkinTone
 window.setCurrentSkinTone = setCurrentSkinTone
 window.usernameToColor = usernameToColor
 
-Vue.directive('tooltip', VTooltip)
+// Directives
+Vue.directive('Tooltip', Tooltip)
+Vue.directive('Focus', Focus)
+Vue.directive('Linkify', Linkify)