-
\ No newline at end of file
+
+
+
+
+
diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/Converter.svelte b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/Converter.svelte
new file mode 100644
index 000000000000..a2ac98646839
--- /dev/null
+++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/Converter.svelte
@@ -0,0 +1,35 @@
+
+
+
+
+
+ {symbol}
+
diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/convertable.js b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/convertable.js
new file mode 100644
index 000000000000..8ed051948a38
--- /dev/null
+++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/convertable.js
@@ -0,0 +1,55 @@
+function convertText (text, symbol) {
+ return text
+ .split(' ')
+ .map(word => word && symbol)
+ .join(' ')
+}
+
+export function convertable (node, { symbol, text }) {
+ const tooltip = document.createElement('div')
+ tooltip.textContent = convertText(text, symbol)
+
+ Object.assign(tooltip.style, {
+ position: 'absolute',
+ background: 'black',
+ color: 'white',
+ padding: '0.5em 1em',
+ fontSize: '15px',
+ pointerEvents: 'none',
+ transform: 'translate(5px, -50%)',
+ borderRadius: '2px',
+ transition: 'opacity 0.4s'
+ })
+
+ function position () {
+ const { top, right, bottom, left } = node.getBoundingClientRect()
+ tooltip.style.top = `${bottom + 35}px`
+ tooltip.style.left = `${left}px`
+ }
+
+ function append () {
+ document.body.appendChild(tooltip)
+ tooltip.style.opacity = 0
+ setTimeout(() => (tooltip.style.opacity = 1))
+ position()
+ }
+
+ function remove () {
+ tooltip.remove()
+ }
+
+ node.addEventListener('mouseenter', append)
+ node.addEventListener('mouseleave', remove)
+
+ return {
+ update ({ symbol, text }) {
+ tooltip.textContent = convertText(text, symbol)
+ },
+
+ destroy () {
+ tooltip.remove()
+ node.removeEventListener('mouseenter', append)
+ node.removeEventListener('mouseleave', remove)
+ }
+ }
+}
diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md
index e6262b2f6c90..e420277e6e67 100644
--- a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md
+++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md
@@ -2,4 +2,45 @@
title: Adding parameters
---
-TODO come up with a better example
\ No newline at end of file
+An Action can also accept parameters. This is useful when we want to work with variables inside the Action.
+
+In this app we want to convert the text in the input field into specified symbol once you hover over it. In order to do so we must firstly import the `convertable` function into `Converter.svelte`
+
+```html
+
+```
+
+We can now use it with the element:
+
+```html
+
+ {symbol}
+
+```
+
+Hover over the symbols now and behold the magic of converting text into emojis. 🎉
+
+You might notice that when you change the text in the input, the amount of symbols in the popup doesn't change. Fortunately we have an easy way to **update** the Action every time the parameters change. We can do so by adding an `update` function into the object returned by the Action. This function is called with updated parameters every time they change.
+
+Update the return value of `convertable` function in `convertable.js`:
+
+```js
+return {
+ update ({ symbol, text }) {
+ tooltip.textContent = convertText(text, symbol)
+ },
+
+ destroy () {
+ tooltip.remove()
+ node.removeEventListener('mouseenter', append)
+ node.removeEventListener('mouseleave', remove)
+ }
+}
+```
+
+If you change the text now and hover over the symbols, you will see the amount changing properly.