Merge pull request #859 from shruti862/new_change

Addresses issue #694
learningequality · Dec 16, 2024 · 2eb8aff · 2eb8aff
2 parents 05119fe + ff59344
commit 2eb8aff
Showing 1 changed file with 106 additions and 4 deletions.
diff --git a/docs/pages/ktooltip.vue b/docs/pages/ktooltip.vue
@@ -1,6 +1,111 @@
 <template>
 
-  <DocsPageTemplate apiDocs />
+  <DocsPageTemplate apiDocs>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      Displays a tooltip when a user hovers over a specific element.
+    </DocsPageSection>
+
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
+      <h3>Use of <code>ref</code> and <code>reference</code></h3>
+
+      <KTooltip
+        reference="myButton"
+        :refs="$refs"
+      >
+        Click me to learn more!
+      </KTooltip>
+      <button ref="myButton">Learn More</button>
+
+      <DocsShowCode language="html">
+        <KTooltip
+          reference="myButton"
+          :refs="$refs"
+        >
+          Click me to learn more!
+        </KTooltip>
+        <button ref="myButton">Learn More</button>
+      </DocsShowCode>
+      <p>
+        The <code>ref</code> attribute creates a reference to the <code>myButton</code> element, and
+        the <code>reference</code> prop associates the tooltip with this reference.
+      </p>
+
+      <h3>Disabled state</h3>
+
+      <KTooltip
+        reference="disableButton"
+        :refs="$refs"
+        disabled
+      >
+        This tooltip is disabled
+      </KTooltip>
+      <button ref="disableButton">Learn More</button>
+
+      <DocsShowCode language="html">
+        <KTooltip
+          reference="disableButton"
+          :refs="$refs"
+          disabled
+        >
+          This tooltip is disabled
+        </KTooltip>
+        <button ref="disableButton">Learn More</button>
+      </DocsShowCode>
+      <p>The <code>disabled</code> prop can be used to disable the tooltip.</p>
+
+      <h3>Supported placements</h3>
+      <div style="display: flex; flex-wrap: wrap">
+        <div style="margin: 10px">
+          <KTooltip
+            reference="topButton"
+            :refs="$refs"
+            placement="top"
+          >
+            Top placement
+          </KTooltip>
+          <button ref="topButton">Top</button>
+        </div>
+      </div>
+      <DocsShowCode language="html">
+        <KTooltip
+          reference="topButton"
+          :refs="$refs"
+          placement="top"
+        >
+          Top placement
+        </KTooltip>
+        <button ref="topButton">Top</button>
+      </DocsShowCode>
+      <p>The <code>placement</code> prop can be used to specify the placement of the tooltip.</p>
+
+      <h3>Maximum width</h3>
+      <KTooltip
+        reference="maxWidthButton"
+        :refs="$refs"
+        maxWidth="200px"
+      >
+        This tooltip has a max width of 200px
+      </KTooltip>
+      <button ref="maxWidthButton">Learn More</button>
+      <DocsShowCode language="html">
+        <KTooltip
+          reference="maxWidthButton"
+          :refs="$refs"
+          maxWidth="200px"
+        >
+          This tooltip has a max width of 200px
+        </KTooltip>
+        <button ref="maxWidthButton">Learn More</button>
+      </DocsShowCode>
+      <p>The <code>maxWidth</code> prop can be used to limit the tooltip width.</p>
+    </DocsPageSection>
+  </DocsPageTemplate>
 
 </template>
 
@@ -10,6 +115,3 @@
   export default {};
 
 </script>
-
-
-<style lang="scss" scoped></style>