Change PlatformHintedContent rendering, js and css to match Figma style

author: Filip Zybała <fzybala@virtuslab.com> 2020-04-06 14:24:07 +0200
committer: Kamil Doległo <kamilok1965@users.noreply.github.com> 2020-04-15 14:41:29 +0200
commit: 72db3a16521408509f4a0f61ef110851a252d2cc (patch)
tree: 24f0a93c809045d66063c4c643d6ded4d4c6a0bc /plugins/base/src/test/resources/expect
parent: fee86d79a3aa7357c68c2f8f519d187f43447e8c (diff)
download: dokka-72db3a16521408509f4a0f61ef110851a252d2cc.tar.gz
dokka-72db3a16521408509f4a0f61ef110851a252d2cc.tar.bz2
dokka-72db3a16521408509f4a0f61ef110851a252d2cc.zip
113 files changed, 1567 insertions, 98 deletions
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 {
author	Filip Zybała <fzybala@virtuslab.com>	2020-04-06 14:24:07 +0200
committer	Kamil Doległo <kamilok1965@users.noreply.github.com>	2020-04-15 14:41:29 +0200
commit	72db3a16521408509f4a0f61ef110851a252d2cc (patch)
tree	24f0a93c809045d66063c4c643d6ded4d4c6a0bc /plugins/base/src/test/resources/expect
parent	fee86d79a3aa7357c68c2f8f519d187f43447e8c (diff)
download	dokka-72db3a16521408509f4a0f61ef110851a252d2cc.tar.gz dokka-72db3a16521408509f4a0f61ef110851a252d2cc.tar.bz2 dokka-72db3a16521408509f4a0f61ef110851a252d2cc.zip