Update snippet descriptions

snippets/Loader.md

@@ -3,10 +3,10 @@ title: Loader
 tags: components,beginner
 ---
 
-Creates a spinning loader component.
+Renders a spinning loader component.
 
-- Define appropriate CSS styles and animations for the component's elements.
+- Render an SVG, whose `height` and `width` are determined by the `size` prop.
-- Define the component, which returns a simple SVG, whose size is determined by the `size` prop.
+- Use CSS to animate the SVG, creating a spinning animation.
 
 ```css
 .loader {

snippets/Mailto.md

@@ -3,16 +3,19 @@ title: Mailto
 tags: components,beginner
 ---
 
-Renders a link formatted to send an email.
+Renders a link formatted to send an email (`mailto:` link).
 
-- Destructure the component's props, use `email`, `subject` and `body` to create a `<a>` element with an appropriate `href` attribute.
+- Use the `email`, `subject` and `body` props to create a `<a>` element with an appropriate `href` attribute.
+- Use `encodeURIcomponent` to safely encode the `subject` and `body` into the link URL.
 - Render the link with `children` as its content.
 
 ```jsx
-const Mailto = ({ email, subject, body, children }) => {
+const Mailto = ({ email, subject = '', body = '', children }) => {
-  return (
+  let params = subject || body ? '?' : '';
-    <a href={`mailto:${email}?subject=${encodeURIComponent(subject) || ''}&body=${encodeURIComponent(body) || ''}`}>{children}</a>
+  if (subject) params += `subject=${encodeURIComponent(subject)}`;
-  );
+  if (body) params += `${subject ? '&' : ''}body=${encodeURIComponent(body)}`;
+
+  return <a href={`mailto:${email}${params}`}>{children}</a>;
 };
 ```
 

snippets/Tooltip.md

@@ -5,26 +5,36 @@ tags: components,state,children,beginner
 
 Renders a tooltip component.
 
-- Use the `React.useState()` hook to create the `show` variable and initialize it to `false`.
+- Use the `useState()` hook to create the `show` variable and initialize it to `false`.
-- Return a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.
+- Render a container element that contains the tooltip element and the `children` passed to the component.
-- Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.
+- Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable, toggling the `className` of the tooltip.
 
 ```css
-.tooltip {
+.tooltip-container {
   position: relative;
+}
+
+.tooltip-box {
+  position: absolute;
   background: rgba(0, 0, 0, 0.7);
-  color: white;
+  color: #fff;
-  visibility: hidden;
   padding: 5px;
   border-radius: 5px;
+  top: calc(100% + 5px);
+  display: none;
 }
+
+.tooltip-box.visible {
+  display: block;
+}
+
 .tooltip-arrow {
   position: absolute;
-  top: 100%;
+  top: -10px;
   left: 50%;
   border-width: 5px;
   border-style: solid;
-  border-color: rgba(0, 0, 0, 0.7) transparent transparent;
+  border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
 }
 ```
 
@@ -33,12 +43,16 @@ const Tooltip = ({ children, text, ...rest }) => {
   const [show, setShow] = React.useState(false);
 
   return (
-    <div>
+    <div className="tooltip-container">
-      <div className="tooltip" style={show ? { visibility: 'visible' } : {}}>
+      <div className={show ? 'tooltip-box visible' : 'tooltip-box'}>
         {text}
         <span className="tooltip-arrow" />
       </div>
-      <div onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)} {...rest}>
+      <div
+        onMouseEnter={() => setShow(true)}
+        onMouseLeave={() => setShow(false)}
+        {...rest}
+      >
         {children}
       </div>
     </div>