feat: add note about tooltip anchors and arrow to indicate that there…

… is an action

docs-v2/content/en/docs/references/yaml/_index.html

@@ -11,6 +11,10 @@
 The Cloud Code IDE extensions (see [install options]({{< relref "../../install/#managed-ide" >}})) provide authoring assistance for `skaffold.yaml` files in the form of schema based validation, diagnostics, quick documentation, code completions, and snippets, that can make it easier to create and edit these files. 
 {{< /alert >}}
 
+{{< alert title="Note">}}
+You can now navigate the `skaffold.yaml` reference from an inner element to its upper levels using the tooltip that appears on hover, clicking on the parent element you want to go: <div class="tooltip-img-continaer">![Tooltip with links to upper elements](/images/tooltip-click-note.png)</div>
+{{< /alert >}}
+
 <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="main.css">
 <script type="module" src="main.js"></script>

docs-v2/content/en/docs/references/yaml/main.css

@@ -125,6 +125,10 @@ a.anchor{
     visibility: hidden;
 }
 
+.stooltip__icon {
+    margin: 0 0 0 6px;
+}
+
 .key:hover > .stooltip {
     opacity: 1;
     visibility: visible;
@@ -136,4 +140,13 @@ a.anchor{
 
 .yaml-link:hover{
     color: #72A1E5;
+}
+
+.yaml-link__separator {
+    cursor: default;
+}
+
+.tooltip-img-continaer {
+    margin: 10px 0 0;
+    max-width: 220px;
 }

docs-v2/content/en/docs/references/yaml/main.js

@@ -255,19 +255,19 @@ function anchor(path, label) {
 }
 
 function tooltip(content) {
-  return html`<span class="stooltip"><span class="stooltip__content">${content}</span></span>`;
+  return html`<span class="stooltip"><span class="stooltip__content">${content}<span class="stooltip__icon"><i class="fas fa-arrow-left"></i></span></span>`;
 }
 
 function getPathLinkList(yamlLinks) {
-  return html`${joinTemplates(yamlLinks.map((yamlLink) => yamlLink.render()), '.')}`;
+  return html`${joinTemplates(yamlLinks.map((yamlLink) => yamlLink.render()), html`<span class="yaml-link__separator">.</span>`)}`;
 }
 
-function joinTemplates(templates=[html``], separator=' ') {
+function joinTemplates(templates=[html``], separator=html` `) {
   const joinedTemplates = [];
 
   for (const template of templates) {
     joinedTemplates.push(template);
-    joinedTemplates.push(html`${separator}`);
+    joinedTemplates.push(separator);
   }
   joinedTemplates.pop();