From 72db3a16521408509f4a0f61ef110851a252d2cc Mon Sep 17 00:00:00 2001
From: Filip Zybała <fzybala@virtuslab.com>
Date: Mon, 6 Apr 2020 14:24:07 +0200
Subject: Change PlatformHintedContent rendering, js and css to match Figma
 style

---
 .../resources/dokka/scripts/navigationLoader.js    |  4 +-
 .../dokka/scripts/platformContentHandler.js        | 29 +++++++++++++
 core/src/main/resources/dokka/styles/style.css     | 50 ++++++++++++++++++++++
 .../src/main/kotlin/renderers/html/HtmlRenderer.kt | 37 ++++++++++------
 .../kotlin/renderers/html/htmlPreprocessors.kt     |  3 +-
 .../renderers/html/PlatformDependentHintTest.kt    | 14 +++---
 .../out/html/root/<jvm root>/f.html                |  4 +-
 .../out/html/root/<jvm root>/index.html            |  4 +-
 .../annotatedFunction/out/html/root/index.html     |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../annotatedFunction/out/html/styles/style.css    | 50 ++++++++++++++++++++++
 .../out/html/root/<jvm root>/-fancy/-init-.html    |  4 +-
 .../out/html/root/<jvm root>/-fancy/equals.html    |  4 +-
 .../out/html/root/<jvm root>/-fancy/hash-code.html |  4 +-
 .../out/html/root/<jvm root>/-fancy/index.html     | 16 ++++---
 .../out/html/root/<jvm root>/-fancy/to-string.html |  4 +-
 .../out/html/root/<jvm root>/f.html                |  4 +-
 .../out/html/root/<jvm root>/index.html            |  7 ++-
 .../out/html/root/index.html                       |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../out/html/styles/style.css                      | 50 ++++++++++++++++++++++
 .../function/out/html/root/<jvm root>/fn.html      |  7 ++-
 .../function/out/html/root/<jvm root>/index.html   |  4 +-
 .../expect/function/out/html/root/index.html       |  1 +
 .../function/out/html/scripts/navigationLoader.js  |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../expect/function/out/html/styles/style.css      | 50 ++++++++++++++++++++++
 .../out/html/root/<jvm root>/-fancy/-init-.html    |  4 +-
 .../out/html/root/<jvm root>/-fancy/equals.html    |  4 +-
 .../out/html/root/<jvm root>/-fancy/hash-code.html |  4 +-
 .../out/html/root/<jvm root>/-fancy/index.html     | 13 ++++--
 .../out/html/root/<jvm root>/-fancy/to-string.html |  4 +-
 .../out/html/root/<jvm root>/function.html         |  4 +-
 .../out/html/root/<jvm root>/index.html            |  7 ++-
 .../out/html/root/index.html                       |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../out/html/styles/style.css                      | 50 ++++++++++++++++++++++
 .../out/html/root/<jvm root>/f.html                |  4 +-
 .../out/html/root/<jvm root>/index.html            |  4 +-
 .../out/html/root/index.html                       |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../out/html/styles/style.css                      | 50 ++++++++++++++++++++++
 .../out/html/root/<jvm root>/function.html         |  4 +-
 .../out/html/root/<jvm root>/index.html            |  4 +-
 .../out/html/root/index.html                       |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../out/html/styles/style.css                      | 50 ++++++++++++++++++++++
 .../out/html/root/<jvm root>/f.html                |  4 +-
 .../out/html/root/<jvm root>/index.html            |  4 +-
 .../out/html/root/index.html                       |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../out/html/styles/style.css                      | 50 ++++++++++++++++++++++
 .../out/html/root/<jvm root>/function.html         |  7 ++-
 .../out/html/root/<jvm root>/index.html            |  4 +-
 .../functionWithParams/out/html/root/index.html    |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../functionWithParams/out/html/styles/style.css   | 50 ++++++++++++++++++++++
 .../out/html/root/<jvm root>/fn.html               | 13 ++++--
 .../out/html/root/<jvm root>/index.html            |  7 ++-
 .../functionWithReceiver/out/html/root/index.html  |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../functionWithReceiver/out/html/styles/style.css | 50 ++++++++++++++++++++++
 .../out/html/root/<jvm root>/generic.html          |  7 ++-
 .../out/html/root/<jvm root>/index.html            |  4 +-
 .../genericFunction/out/html/root/index.html       |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../genericFunction/out/html/styles/style.css      | 50 ++++++++++++++++++++++
 .../out/html/root/<jvm root>/generic.html          |  7 ++-
 .../out/html/root/<jvm root>/index.html            |  4 +-
 .../out/html/root/index.html                       |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../out/html/styles/style.css                      | 50 ++++++++++++++++++++++
 .../inlineFunction/out/html/root/<jvm root>/f.html |  4 +-
 .../out/html/root/<jvm root>/index.html            |  4 +-
 .../expect/inlineFunction/out/html/root/index.html |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../inlineFunction/out/html/styles/style.css       | 50 ++++++++++++++++++++++
 .../out/html/root/<jvm root>/f.html                |  4 +-
 .../out/html/root/<jvm root>/index.html            |  4 +-
 .../inlineSuspendFunction/out/html/root/index.html |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../out/html/styles/style.css                      | 50 ++++++++++++++++++++++
 .../expect/signatureTest/out/html/root/index.html  |  1 +
 .../out/html/root/signatureTest/index.html         |  7 ++-
 .../out/html/root/signatureTest/test.html          |  4 +-
 .../out/html/root/signatureTest/test2.html         |  4 +-
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../expect/signatureTest/out/html/styles/style.css | 50 ++++++++++++++++++++++
 .../html/root/<jvm root>/available-since1.1.html   |  7 ++-
 .../out/html/root/<jvm root>/index.html            |  4 +-
 .../expect/sinceKotlin/out/html/root/index.html    |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../expect/sinceKotlin/out/html/styles/style.css   | 50 ++++++++++++++++++++++
 .../out/html/root/<jvm root>/f.html                |  4 +-
 .../out/html/root/<jvm root>/index.html            |  4 +-
 .../suspendFunction/out/html/root/index.html       |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../suspendFunction/out/html/styles/style.css      | 50 ++++++++++++++++++++++
 .../out/html/root/<jvm root>/f.html                |  4 +-
 .../out/html/root/<jvm root>/index.html            |  4 +-
 .../suspendInlineFunction/out/html/root/index.html |  1 +
 .../out/html/scripts/navigationLoader.js           |  4 +-
 .../out/html/scripts/platformContentHandler.js     | 29 +++++++++++++
 .../out/html/styles/style.css                      | 50 ++++++++++++++++++++++
 119 files changed, 1682 insertions(+), 120 deletions(-)
 create mode 100644 core/src/main/resources/dokka/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/annotatedFunction/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/function/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/functionWithParams/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/functionWithReceiver/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/genericFunction/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/inlineFunction/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/signatureTest/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/sinceKotlin/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/suspendFunction/out/html/scripts/platformContentHandler.js
 create mode 100644 plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/scripts/platformContentHandler.js

diff --git a/core/src/main/resources/dokka/scripts/navigationLoader.js b/core/src/main/resources/dokka/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/core/src/main/resources/dokka/scripts/navigationLoader.js
+++ b/core/src/main/resources/dokka/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/core/src/main/resources/dokka/scripts/platformContentHandler.js b/core/src/main/resources/dokka/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/core/src/main/resources/dokka/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/core/src/main/resources/dokka/styles/style.css b/core/src/main/resources/dokka/styles/style.css
index 5c347128..720998ad 100644
--- a/core/src/main/resources/dokka/styles/style.css
+++ b/core/src/main/resources/dokka/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
index e1025ed4..bbb5b685 100644
--- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
@@ -60,20 +60,33 @@ open class HtmlRenderer(
     }
 
     override fun FlowContent.buildPlatformDependent(content: PlatformHintedContent, pageContext: ContentPage) {
-        val distinct = content.platforms.map {
-            it to createHTML(prettyPrint = false).div {
-                buildContentNode(content.inner, pageContext, it)
-            }.drop(5).dropLast(6) // TODO: Find a way to do it without arbitrary trims
-        }.groupBy(Pair<PlatformData, String>::second, Pair<PlatformData, String>::first)
-
-        if (distinct.size == 1)
-            consumer.onTagContentUnsafe { +distinct.keys.single() }
-        else
-            distinct.forEach { text, platforms ->
-                consumer.onTagContentUnsafe {
-                    +platforms.joinToString(prefix = " [", postfix = "] $text") { it.platformType.key }
+        div("platform-hinted") {
+            attributes["data-platform-hinted"] = "data-platform-hinted"
+            val contents = content.platforms.mapIndexed { index,platform ->
+                platform to createHTML(prettyPrint = false).div(classes = "content") {
+                    if (index == 0) attributes["data-active"] = ""
+                    attributes["data-togglable"] = platform.targets.joinToString("-")
+                    buildContentNode(content.inner, pageContext, platform)
                 }
             }
+
+            if(contents.size != 1) {
+                div("platform-bookmarks-row") {
+                    attributes["data-toggle-list"] = "data-toggle-list"
+                    contents.forEachIndexed { index,pair ->
+                        button(classes = "platform-bookmark") {
+                            if (index == 0) attributes["data-active"] = ""
+                            attributes["data-toggle"] = pair.first.targets.joinToString("-")
+                            text(pair.first.targets.joinToString(", "));
+                        }
+                    }
+                }
+            }
+
+            contents.forEach {
+                consumer.onTagContentUnsafe { +it.second }
+            }
+        }
     }
 
     override fun FlowContent.buildList(
diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
index 9fed74e2..aaf82ba8 100644
--- a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
@@ -64,7 +64,8 @@ object StyleAndScriptsAppender : PageTransformer {
         it.modified(
             embeddedResources = it.embeddedResources + listOf(
                 "styles/style.css",
-                "scripts/navigationLoader.js"
+                "scripts/navigationLoader.js",
+                "scripts/platformContentHandler.js"
             )
         )
     }
diff --git a/plugins/base/src/test/kotlin/renderers/html/PlatformDependentHintTest.kt b/plugins/base/src/test/kotlin/renderers/html/PlatformDependentHintTest.kt
index a985886d..cf1ac0a9 100644
--- a/plugins/base/src/test/kotlin/renderers/html/PlatformDependentHintTest.kt
+++ b/plugins/base/src/test/kotlin/renderers/html/PlatformDependentHintTest.kt
@@ -26,7 +26,7 @@ class PlatformDependentHintTest : RenderingOnlyTestBase() {
         }
 
         HtmlRenderer(context).render(page)
-        renderedContent.match(Div("abc"))
+        renderedContent.match(Div(Div(Div("abc"))))
     }
 
     @Test
@@ -40,7 +40,7 @@ class PlatformDependentHintTest : RenderingOnlyTestBase() {
         }
 
         HtmlRenderer(context).render(page)
-        renderedContent.match("[js]", Div("a"), "[jvm]",  Div("b"), "[native]", Div("c"))
+        renderedContent.match(Div(Div(Div("a")), Div(Div("b")), Div(Div("c"))))
     }
 
     @Test
@@ -54,7 +54,7 @@ class PlatformDependentHintTest : RenderingOnlyTestBase() {
         }
 
         HtmlRenderer(context).render(page)
-        renderedContent.match("[js]", Div("ab"), "[jvm]", Div("bc"))
+        renderedContent.match(Div(Div(Div("ab")), Div(Div("bc"))))
     }
 
     @Test
@@ -68,7 +68,7 @@ class PlatformDependentHintTest : RenderingOnlyTestBase() {
         }
 
         HtmlRenderer(context).render(page)
-        renderedContent.match(Div("ab"))
+        renderedContent.match(Div(Div(Div("ab"))))
     }
 
     @Test
@@ -84,7 +84,7 @@ class PlatformDependentHintTest : RenderingOnlyTestBase() {
         }
 
         HtmlRenderer(context).render(page)
-        renderedContent.match("[js]", Div(Div("ab")), "[jvm]", Div(Div("a"), "b"))
+        renderedContent.match(Div(Div(Div(Div("ab"))), Div(Div(Div("a"), "b"))))
     }
 
     @Test
@@ -101,7 +101,7 @@ class PlatformDependentHintTest : RenderingOnlyTestBase() {
 
         HtmlRenderer(context).render(page)
         println(renderedContent)
-        renderedContent.match("ab")
+        renderedContent.match(Div(Div("ab")))
     }
 
     @Test
@@ -115,6 +115,6 @@ class PlatformDependentHintTest : RenderingOnlyTestBase() {
         }
 
         HtmlRenderer(context).render(page)
-        renderedContent.match("[js, jvm]", Div("a"), "[native]",  Div("b"))
+        renderedContent.match(Div(Div(Div("a")), Div(Div("b"))))
     }
 }
\ No newline at end of file
diff --git a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/<jvm root>/f.html b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/<jvm root>/f.html
index dafca58f..9de96412 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/<jvm root>/f.html	
+++ b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/<jvm root>/f.html	
@@ -4,6 +4,7 @@
     <title>f</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="f.html">f</a></div>
           <div class="cover ">
             <h1>f</h1>
-<div class="symbol monospace">final fun <a href="f.html">f</a>()</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/<jvm root>/index.html
index 59b7070b..1ebe6dce 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="f.html">f</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/index.html b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/-init-.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/-init-.html
index 0ad7d7df..d1bfe590 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/-init-.html	
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/-init-.html	
@@ -4,6 +4,7 @@
     <title>&lt;init&gt;</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a>/<a href="-init-.html">&lt;init&gt;</a></div>
           <div class="cover ">
             <h1>&lt;init&gt;</h1>
-<div class="symbol monospace">final fun <a href="-init-.html">&lt;init&gt;</a>(size: <a href="">Int</a>)</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="-init-.html">&lt;init&gt;</a>(size: <a href="">Int</a>)</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/equals.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/equals.html
index d1a73c8d..2645051d 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/equals.html	
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/equals.html	
@@ -4,6 +4,7 @@
     <title>equals</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a>/<a href="equals.html">equals</a></div>
           <div class="cover ">
             <h1>equals</h1>
-<div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/hash-code.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/hash-code.html
index 68e223af..09cf0e01 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/hash-code.html	
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/hash-code.html	
@@ -4,6 +4,7 @@
     <title>hashCode</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a>/<a href="hash-code.html">hashCode</a></div>
           <div class="cover ">
             <h1>hashCode</h1>
-<div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/index.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/index.html
index 77b20479..743c6dcc 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/index.html	
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/index.html	
@@ -4,6 +4,7 @@
     <title>Fancy</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,14 +21,16 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a></div>
           <div class="cover ">
             <h1>Fancy</h1>
-<div class="symbol monospace">annotation class <a href="index.html">Fancy</a></div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">annotation class <a href="index.html">Fancy</a></div></div></div>
+          </div>
           <h2>Functions</h2>
           <table>
             <thead></thead>
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="equals.html">equals</a></td>
-                <td class="content"><div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
@@ -36,7 +39,8 @@
               </tr>
               <tr class="platform-tagged">
                 <td class="content"><a href="hash-code.html">hashCode</a></td>
-                <td class="content"><div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
@@ -45,7 +49,8 @@
               </tr>
               <tr class="platform-tagged">
                 <td class="content"><a href="to-string.html">toString</a></td>
-                <td class="content"><div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
@@ -60,7 +65,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="">size</a></td>
-                <td class="content"><div class="symbol monospace"><a href="">Int</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace"><a href="">Int</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/to-string.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/to-string.html
index 905cddc2..48b4711c 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/to-string.html	
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/to-string.html	
@@ -4,6 +4,7 @@
     <title>toString</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a>/<a href="to-string.html">toString</a></div>
           <div class="cover ">
             <h1>toString</h1>
-<div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/f.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/f.html
index dafca58f..9de96412 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/f.html	
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/f.html	
@@ -4,6 +4,7 @@
     <title>f</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="f.html">f</a></div>
           <div class="cover ">
             <h1>f</h1>
-<div class="symbol monospace">final fun <a href="f.html">f</a>()</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/index.html
index cbe266c3..25340ae7 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="-fancy/index.html">Fancy</a></td>
-                <td class="content"><div class="symbol monospace">annotation class <a href="-fancy/index.html">Fancy</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">annotation class <a href="-fancy/index.html">Fancy</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
@@ -42,7 +44,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="f.html">f</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/index.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/styles/style.css b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/function/out/html/root/<jvm root>/fn.html b/plugins/base/src/test/resources/expect/function/out/html/root/<jvm root>/fn.html
index 91d784c8..e49ade86 100644
--- a/plugins/base/src/test/resources/expect/function/out/html/root/<jvm root>/fn.html	
+++ b/plugins/base/src/test/resources/expect/function/out/html/root/<jvm root>/fn.html	
@@ -4,6 +4,7 @@
     <title>fn</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,9 +21,11 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="fn.html">fn</a></div>
           <div class="cover ">
             <h1>fn</h1>
-<div class="symbol monospace">final fun <a href="fn.html">fn</a>()</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="fn.html">fn</a>()</div></div></div>
+          </div>
           <h3>Description</h3>
-Function fn        </div>
+          <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm">Function fn</div></div>
+        </div>
       </div>
     </div>
   </body>
diff --git a/plugins/base/src/test/resources/expect/function/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/function/out/html/root/<jvm root>/index.html
index 1f7ac4a3..58d5c404 100644
--- a/plugins/base/src/test/resources/expect/function/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/function/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="fn.html">fn</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="fn.html">fn</a>()</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="fn.html">fn</a>()</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/function/out/html/root/index.html b/plugins/base/src/test/resources/expect/function/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/function/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/function/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/function/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/function/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/function/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/function/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/function/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/function/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/function/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/function/out/html/styles/style.css b/plugins/base/src/test/resources/expect/function/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/function/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/function/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/-init-.html b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/-init-.html
index 755863db..03d4d238 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/-init-.html	
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/-init-.html	
@@ -4,6 +4,7 @@
     <title>&lt;init&gt;</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a>/<a href="-init-.html">&lt;init&gt;</a></div>
           <div class="cover ">
             <h1>&lt;init&gt;</h1>
-<div class="symbol monospace">final fun <a href="-init-.html">&lt;init&gt;</a>()</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="-init-.html">&lt;init&gt;</a>()</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/equals.html b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/equals.html
index d1a73c8d..2645051d 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/equals.html	
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/equals.html	
@@ -4,6 +4,7 @@
     <title>equals</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a>/<a href="equals.html">equals</a></div>
           <div class="cover ">
             <h1>equals</h1>
-<div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/hash-code.html b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/hash-code.html
index 68e223af..09cf0e01 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/hash-code.html	
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/hash-code.html	
@@ -4,6 +4,7 @@
     <title>hashCode</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a>/<a href="hash-code.html">hashCode</a></div>
           <div class="cover ">
             <h1>hashCode</h1>
-<div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/index.html b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/index.html
index 28585a2a..4f02e43a 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/index.html	
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/index.html	
@@ -4,6 +4,7 @@
     <title>Fancy</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,14 +21,16 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a></div>
           <div class="cover ">
             <h1>Fancy</h1>
-<div class="symbol monospace">annotation class <a href="index.html">Fancy</a></div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">annotation class <a href="index.html">Fancy</a></div></div></div>
+          </div>
           <h2>Functions</h2>
           <table>
             <thead></thead>
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="equals.html">equals</a></td>
-                <td class="content"><div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
@@ -36,7 +39,8 @@
               </tr>
               <tr class="platform-tagged">
                 <td class="content"><a href="hash-code.html">hashCode</a></td>
-                <td class="content"><div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
@@ -45,7 +49,8 @@
               </tr>
               <tr class="platform-tagged">
                 <td class="content"><a href="to-string.html">toString</a></td>
-                <td class="content"><div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/to-string.html b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/to-string.html
index 905cddc2..48b4711c 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/to-string.html	
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/-fancy/to-string.html	
@@ -4,6 +4,7 @@
     <title>toString</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a>/<a href="to-string.html">toString</a></div>
           <div class="cover ">
             <h1>toString</h1>
-<div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/function.html b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/function.html
index a6a78b74..6464397a 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/function.html	
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/function.html	
@@ -4,6 +4,7 @@
     <title>function</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="function.html">function</a></div>
           <div class="cover ">
             <h1>function</h1>
-<div class="symbol monospace">final fun <a href="function.html">function</a>(notInlined: <div class="symbol monospace">() -&gt; <a href="">Unit</a></div>)</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="function.html">function</a>(notInlined: <div class="symbol monospace">() -&gt; <a href="">Unit</a></div>)</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/index.html
index 61723ee4..b6f76db9 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="-fancy/index.html">Fancy</a></td>
-                <td class="content"><div class="symbol monospace">annotation class <a href="-fancy/index.html">Fancy</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">annotation class <a href="-fancy/index.html">Fancy</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
@@ -42,7 +44,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="function.html">function</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="function.html">function</a>(notInlined: <div class="symbol monospace">() -&gt; <a href="">Unit</a></div>)</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="function.html">function</a>(notInlined: <div class="symbol monospace">() -&gt; <a href="">Unit</a></div>)</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/index.html b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/styles/style.css b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/<jvm root>/f.html b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/<jvm root>/f.html
index 0165e179..47b3db1c 100644
--- a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/<jvm root>/f.html	
+++ b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/<jvm root>/f.html	
@@ -4,6 +4,7 @@
     <title>f</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="f.html">f</a></div>
           <div class="cover ">
             <h1>f</h1>
-<div class="symbol monospace">final fun <a href="f.html">f</a>(x: <a href="">String</a>)</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>(x: <a href="">String</a>)</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/<jvm root>/index.html
index 2d08f84f..fb7eacf2 100644
--- a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="f.html">f</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="f.html">f</a>(x: <a href="">String</a>)</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>(x: <a href="">String</a>)</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/index.html b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/styles/style.css b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/<jvm root>/function.html b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/<jvm root>/function.html
index a6a78b74..6464397a 100644
--- a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/<jvm root>/function.html	
+++ b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/<jvm root>/function.html	
@@ -4,6 +4,7 @@
     <title>function</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="function.html">function</a></div>
           <div class="cover ">
             <h1>function</h1>
-<div class="symbol monospace">final fun <a href="function.html">function</a>(notInlined: <div class="symbol monospace">() -&gt; <a href="">Unit</a></div>)</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="function.html">function</a>(notInlined: <div class="symbol monospace">() -&gt; <a href="">Unit</a></div>)</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/<jvm root>/index.html
index a14357c0..c509e95e 100644
--- a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="function.html">function</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="function.html">function</a>(notInlined: <div class="symbol monospace">() -&gt; <a href="">Unit</a></div>)</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="function.html">function</a>(notInlined: <div class="symbol monospace">() -&gt; <a href="">Unit</a></div>)</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/index.html b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/styles/style.css b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/<jvm root>/f.html b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/<jvm root>/f.html
index dafca58f..9de96412 100644
--- a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/<jvm root>/f.html	
+++ b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/<jvm root>/f.html	
@@ -4,6 +4,7 @@
     <title>f</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="f.html">f</a></div>
           <div class="cover ">
             <h1>f</h1>
-<div class="symbol monospace">final fun <a href="f.html">f</a>()</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/<jvm root>/index.html
index 59b7070b..1ebe6dce 100644
--- a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="f.html">f</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/index.html b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/styles/style.css b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/<jvm root>/function.html b/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/<jvm root>/function.html
index 41bbfa81..6e34095f 100644
--- a/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/<jvm root>/function.html	
+++ b/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/<jvm root>/function.html	
@@ -4,6 +4,7 @@
     <title>function</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,9 +21,11 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="function.html">function</a></div>
           <div class="cover ">
             <h1>function</h1>
-<div class="symbol monospace">final fun <a href="function.html">function</a>(x: <a href="">Int</a>)</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="function.html">function</a>(x: <a href="">Int</a>)</div></div></div>
+          </div>
           <h3>Description</h3>
-MultilineFunction Documentation        </div>
+          <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm">MultilineFunction Documentation</div></div>
+        </div>
       </div>
     </div>
   </body>
diff --git a/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/<jvm root>/index.html
index c05dafcb..42458c2a 100644
--- a/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="function.html">function</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="function.html">function</a>(x: <a href="">Int</a>)</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="function.html">function</a>(x: <a href="">Int</a>)</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/index.html b/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/functionWithParams/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/functionWithParams/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/functionWithParams/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/functionWithParams/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/functionWithParams/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/functionWithParams/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/functionWithParams/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/functionWithParams/out/html/styles/style.css b/plugins/base/src/test/resources/expect/functionWithParams/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/functionWithParams/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/functionWithParams/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/<jvm root>/fn.html b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/<jvm root>/fn.html
index 2ef82b0e..fdcd4a9d 100644
--- a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/<jvm root>/fn.html	
+++ b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/<jvm root>/fn.html	
@@ -4,6 +4,7 @@
     <title>fn</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,13 +21,17 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="fn.html">fn</a></div>
           <div class="cover ">
             <h1>fn</h1>
-<div class="symbol monospace">final fun <a href="">String</a>.<a href="fn.html">fn</a>()</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="">String</a>.<a href="fn.html">fn</a>()</div></div></div>
+          </div>
           <h3>Description</h3>
-Function with receiver          <div class="cover ">
+          <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm">Function with receiver</div></div>
+          <div class="cover ">
             <h1>fn</h1>
-<div class="symbol monospace">final fun <a href="">String</a>.<a href="fn.html">fn</a>(x: <a href="">Int</a>)</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="">String</a>.<a href="fn.html">fn</a>(x: <a href="">Int</a>)</div></div></div>
+          </div>
           <h3>Description</h3>
-Function with receiver        </div>
+          <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm">Function with receiver</div></div>
+        </div>
       </div>
     </div>
   </body>
diff --git a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/<jvm root>/index.html
index fbe99965..4e481086 100644
--- a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="fn.html">fn</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="">String</a>.<a href="fn.html">fn</a>()</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="">String</a>.<a href="fn.html">fn</a>()</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
@@ -36,7 +38,8 @@
               </tr>
               <tr class="platform-tagged">
                 <td class="content"><a href="fn.html">fn</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="">String</a>.<a href="fn.html">fn</a>(x: <a href="">Int</a>)</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="">String</a>.<a href="fn.html">fn</a>(x: <a href="">Int</a>)</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/index.html b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/styles/style.css b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/genericFunction/out/html/root/<jvm root>/generic.html b/plugins/base/src/test/resources/expect/genericFunction/out/html/root/<jvm root>/generic.html
index 7a811876..2d8a5c7f 100644
--- a/plugins/base/src/test/resources/expect/genericFunction/out/html/root/<jvm root>/generic.html	
+++ b/plugins/base/src/test/resources/expect/genericFunction/out/html/root/<jvm root>/generic.html	
@@ -4,6 +4,7 @@
     <title>generic</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,9 +21,11 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="generic.html">generic</a></div>
           <div class="cover ">
             <h1>generic</h1>
-<div class="symbol monospace">private final fun &lt;<a href="generic.html">T</a> : <a href="">Any</a>&gt; <a href="generic.html">generic</a>()</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">private final fun &lt;<a href="generic.html">T</a> : <a href="">Any</a>&gt; <a href="generic.html">generic</a>()</div></div></div>
+          </div>
           <h3>Description</h3>
-generic function        </div>
+          <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm">generic function</div></div>
+        </div>
       </div>
     </div>
   </body>
diff --git a/plugins/base/src/test/resources/expect/genericFunction/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/genericFunction/out/html/root/<jvm root>/index.html
index 02e9c431..4cf172df 100644
--- a/plugins/base/src/test/resources/expect/genericFunction/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/genericFunction/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="generic.html">generic</a></td>
-                <td class="content"><div class="symbol monospace">private final fun &lt;<a href="generic.html">T</a> : <a href="">Any</a>&gt; <a href="generic.html">generic</a>()</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">private final fun &lt;<a href="generic.html">T</a> : <a href="">Any</a>&gt; <a href="generic.html">generic</a>()</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/genericFunction/out/html/root/index.html b/plugins/base/src/test/resources/expect/genericFunction/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/genericFunction/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/genericFunction/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/genericFunction/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/genericFunction/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/genericFunction/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/genericFunction/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/genericFunction/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/genericFunction/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/genericFunction/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/genericFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/genericFunction/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/genericFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/genericFunction/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/<jvm root>/generic.html b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/<jvm root>/generic.html
index 0c135b62..0c00617f 100644
--- a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/<jvm root>/generic.html	
+++ b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/<jvm root>/generic.html	
@@ -4,6 +4,7 @@
     <title>generic</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,9 +21,11 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="generic.html">generic</a></div>
           <div class="cover ">
             <h1>generic</h1>
-<div class="symbol monospace">final fun &lt;<a href="generic.html">T</a> : R, <a href="generic.html">R</a> : <a href="">Any</a>&gt; <a href="generic.html">generic</a>()</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun &lt;<a href="generic.html">T</a> : R, <a href="generic.html">R</a> : <a href="">Any</a>&gt; <a href="generic.html">generic</a>()</div></div></div>
+          </div>
           <h3>Description</h3>
-generic function        </div>
+          <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm">generic function</div></div>
+        </div>
       </div>
     </div>
   </body>
diff --git a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/<jvm root>/index.html
index 3161a78f..a59f1ad7 100644
--- a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="generic.html">generic</a></td>
-                <td class="content"><div class="symbol monospace">final fun &lt;<a href="generic.html">T</a> : R, <a href="generic.html">R</a> : <a href="">Any</a>&gt; <a href="generic.html">generic</a>()</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun &lt;<a href="generic.html">T</a> : R, <a href="generic.html">R</a> : <a href="">Any</a>&gt; <a href="generic.html">generic</a>()</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/index.html b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/styles/style.css b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/<jvm root>/f.html b/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/<jvm root>/f.html
index 1d2532b6..37795eb2 100644
--- a/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/<jvm root>/f.html	
+++ b/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/<jvm root>/f.html	
@@ -4,6 +4,7 @@
     <title>f</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="f.html">f</a></div>
           <div class="cover ">
             <h1>f</h1>
-<div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/<jvm root>/index.html
index 8666b724..cfd0ab30 100644
--- a/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="f.html">f</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/index.html b/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/inlineFunction/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/inlineFunction/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/inlineFunction/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/inlineFunction/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/inlineFunction/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/inlineFunction/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/inlineFunction/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/inlineFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/inlineFunction/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/inlineFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/inlineFunction/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/<jvm root>/f.html b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/<jvm root>/f.html
index 1d2532b6..37795eb2 100644
--- a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/<jvm root>/f.html	
+++ b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/<jvm root>/f.html	
@@ -4,6 +4,7 @@
     <title>f</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="f.html">f</a></div>
           <div class="cover ">
             <h1>f</h1>
-<div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/<jvm root>/index.html
index 8666b724..cfd0ab30 100644
--- a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="f.html">f</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/index.html b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/signatureTest/out/html/root/index.html b/plugins/base/src/test/resources/expect/signatureTest/out/html/root/index.html
index 8dded9be..7cec6415 100644
--- a/plugins/base/src/test/resources/expect/signatureTest/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/signatureTest/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/index.html b/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/index.html
index 2f75a288..f6c108eb 100644
--- a/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/index.html
+++ b/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/index.html
@@ -4,6 +4,7 @@
     <title>signatureTest</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="test.html">test</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="test.html">test</a>(i: <div class="symbol monospace">(<a href="">Int</a>) -&gt; <a href="">Int</a></div>)</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="test.html">test</a>(i: <div class="symbol monospace">(<a href="">Int</a>) -&gt; <a href="">Int</a></div>)</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
@@ -36,7 +38,8 @@
               </tr>
               <tr class="platform-tagged">
                 <td class="content"><a href="test2.html">test2</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="test2.html">test2</a>(i: <div class="symbol monospace"><a href="">Int</a>.(<a href="">Int</a>) -&gt; <a href="">Int</a></div>)</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="test2.html">test2</a>(i: <div class="symbol monospace"><a href="">Int</a>.(<a href="">Int</a>) -&gt; <a href="">Int</a></div>)</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/test.html b/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/test.html
index 6eda8f33..b0e440b1 100644
--- a/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/test.html
+++ b/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/test.html
@@ -4,6 +4,7 @@
     <title>test</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">signatureTest</a>/<a href="test.html">test</a></div>
           <div class="cover ">
             <h1>test</h1>
-<div class="symbol monospace">final fun <a href="test.html">test</a>(i: <div class="symbol monospace">(<a href="">Int</a>) -&gt; <a href="">Int</a></div>)</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="test.html">test</a>(i: <div class="symbol monospace">(<a href="">Int</a>) -&gt; <a href="">Int</a></div>)</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/test2.html b/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/test2.html
index d01ffd73..3128a10b 100644
--- a/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/test2.html
+++ b/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/test2.html
@@ -4,6 +4,7 @@
     <title>test2</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">signatureTest</a>/<a href="test2.html">test2</a></div>
           <div class="cover ">
             <h1>test2</h1>
-<div class="symbol monospace">final fun <a href="test2.html">test2</a>(i: <div class="symbol monospace"><a href="">Int</a>.(<a href="">Int</a>) -&gt; <a href="">Int</a></div>)</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="test2.html">test2</a>(i: <div class="symbol monospace"><a href="">Int</a>.(<a href="">Int</a>) -&gt; <a href="">Int</a></div>)</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/signatureTest/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/signatureTest/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/signatureTest/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/signatureTest/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/signatureTest/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/signatureTest/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/signatureTest/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/signatureTest/out/html/styles/style.css b/plugins/base/src/test/resources/expect/signatureTest/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/signatureTest/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/signatureTest/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/<jvm root>/available-since1.1.html b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/<jvm root>/available-since1.1.html
index b3075587..628af947 100644
--- a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/<jvm root>/available-since1.1.html	
+++ b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/<jvm root>/available-since1.1.html	
@@ -4,6 +4,7 @@
     <title>availableSince1.1</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,9 +21,11 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="available-since1.1.html">availableSince1.1</a></div>
           <div class="cover ">
             <h1>availableSince1.1</h1>
-<div class="symbol monospace">final fun <a href="available-since1.1.html">availableSince1.1</a>(): <a href="">String</a></div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="available-since1.1.html">availableSince1.1</a>(): <a href="">String</a></div></div></div>
+          </div>
           <h3>Description</h3>
-Quite useful <a href="">String</a>        </div>
+          <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm">Quite useful <a href="">String</a></div></div>
+        </div>
       </div>
     </div>
   </body>
diff --git a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/<jvm root>/index.html
index 069b17ac..0f343034 100644
--- a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="available-since1.1.html">availableSince1.1</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="available-since1.1.html">availableSince1.1</a>(): <a href="">String</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="available-since1.1.html">availableSince1.1</a>(): <a href="">String</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/index.html b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/styles/style.css b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/<jvm root>/f.html b/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/<jvm root>/f.html
index dafca58f..9de96412 100644
--- a/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/<jvm root>/f.html	
+++ b/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/<jvm root>/f.html	
@@ -4,6 +4,7 @@
     <title>f</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="f.html">f</a></div>
           <div class="cover ">
             <h1>f</h1>
-<div class="symbol monospace">final fun <a href="f.html">f</a>()</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/<jvm root>/index.html
index 59b7070b..1ebe6dce 100644
--- a/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="f.html">f</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/index.html b/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/suspendFunction/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/suspendFunction/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/suspendFunction/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/suspendFunction/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/suspendFunction/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/suspendFunction/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/suspendFunction/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/suspendFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/suspendFunction/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/suspendFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/suspendFunction/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
diff --git a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/<jvm root>/f.html b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/<jvm root>/f.html
index 1d2532b6..37795eb2 100644
--- a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/<jvm root>/f.html	
+++ b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/<jvm root>/f.html	
@@ -4,6 +4,7 @@
     <title>f</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="f.html">f</a></div>
           <div class="cover ">
             <h1>f</h1>
-<div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/<jvm root>/index.html
index 8666b724..cfd0ab30 100644
--- a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/<jvm root>/index.html	
+++ b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/<jvm root>/index.html	
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="f.html">f</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/index.html b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
-- 
cgit