diff --git a/web/packages/design/src/Mark/Mark.story.tsx b/web/packages/design/src/Mark/Mark.story.tsx
index 596190e6bd69d..0b532cd03d2ab 100644
--- a/web/packages/design/src/Mark/Mark.story.tsx
+++ b/web/packages/design/src/Mark/Mark.story.tsx
@@ -46,7 +46,7 @@ export const SampleText = () => {
 export const MarkInsideTooltip = () => {
   return (
     <IconTooltip>
-      Example of <MarkInverse>MarkForToolTip</MarkInverse>. Note the{' '}
+      Example of <MarkInverse>MarkInverse</MarkInverse> component. Note the{' '}
       <MarkInverse>inversed</MarkInverse> background and text color.
     </IconTooltip>
   );
diff --git a/web/packages/design/src/Mark/Mark.tsx b/web/packages/design/src/Mark/Mark.tsx
index 07e11f360bd6b..95552b8e9882b 100644
--- a/web/packages/design/src/Mark/Mark.tsx
+++ b/web/packages/design/src/Mark/Mark.tsx
@@ -27,6 +27,14 @@ export const Mark = styled.mark`
   color: inherit;
 `;
 
+/**
+ * Returns a MarkInverse that inverts the colors from its parent Mark.
+ * For example, if current theme is dark theme, parent Mark would use
+ * light colors, but MarkInverse will use dark colors.
+ *
+ * Intended for use in tooltips since tooltips uses inverse background
+ * color of the current theme.
+ */
 export const MarkInverse = styled(Mark)`
   background-color: ${p => p.theme.colors.tooltip.inverseBackground};
   color: ${p => p.theme.colors.text.main};
diff --git a/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/ResourceLabelTooltip.tsx b/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/ResourceLabelTooltip.tsx
index 78627abfb0947..2e7ad2d1980aa 100644
--- a/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/ResourceLabelTooltip.tsx
+++ b/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/ResourceLabelTooltip.tsx
@@ -22,6 +22,16 @@ import { Position } from 'design/Popover/Popover';
 import { IconTooltip } from 'design/Tooltip';
 import styled from 'styled-components';
 
+/**
+ * Returns a IconTooltip component with its tip contents
+ * set to the requested resource kind.
+ *
+ * @param resourceKind - the tip contents differ slightly depending
+ * on the resource kind
+ * @param toolTipPosition (opt) - the position which the tooltip should
+ * render (see type Position)
+ * @returns JSX Element
+ */
 export function ResourceLabelTooltip({
   resourceKind,
   toolTipPosition,
@@ -38,7 +48,7 @@ export function ResourceLabelTooltip({
           Labels allow you to do the following:
           <Ul>
             <li>
-              Filter servers by labels when using tsh, tctl, or the web UI
+              Filter servers by labels when using tsh, tctl, or the web UI.
             </li>
             <li>
               Restrict access to this server with{' '}
@@ -64,7 +74,7 @@ export function ResourceLabelTooltip({
           <Ul>
             <li>
               Filter Kubernetes clusters by labels when using tsh, tctl, or the
-              web UI
+              web UI.
             </li>
             <li>
               Restrict access to this Kubernetes cluster with{' '}
@@ -96,7 +106,7 @@ export function ResourceLabelTooltip({
           Labels allow you to do the following:
           <Ul>
             <li>
-              Filter databases by labels when using tsh, tctl, or the web UI
+              Filter databases by labels when using tsh, tctl, or the web UI.
             </li>
             <li>
               Restrict access to this database with{' '}