feat(mediabodysocial): add tooltip to media icons

this adds a new tooltip to all media icons in the media body component

#114

Author: Greg-Hamel

src/components/Media/MediaBodySocial.react.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from "react";
-import { List, Media } from "../../components";
+import { List, Media, Tooltip } from "../";
 
 type Props = {|
   +children?: React.Node,
@@ -32,39 +32,47 @@ function MediaBodySocial({
   if (facebook) {
     fbIcon = (
       <List.Item className="list-inline-item">
-        <a href="/Profile">
-          <i className="fa fa-facebook" />
-        </a>
+        <Tooltip content="Facebook" placement="top">
+          <a href="/Profile">
+            <i className="fa fa-facebook" />
+          </a>
+        </Tooltip>
       </List.Item>
     );
   }
 
   if (twitter) {
     twitterIcon = (
       <List.Item className="list-inline-item">
-        <a href="/Profile" data-original-title="Twitter">
-          <i className="fa fa-twitter" />
-        </a>
+        <Tooltip content="Twitter" placement="top">
+          <a href="/Profile">
+            <i className="fa fa-twitter" />
+          </a>
+        </Tooltip>
       </List.Item>
     );
   }
 
   if (phone) {
     phoneIcon = (
       <List.Item className="list-inline-item">
-        <a href="/Profile" data-original-title="1234567890">
-          <i className="fa fa-phone" />
-        </a>
+        <Tooltip content="+1 234-567-8901" placement="top">
+          <a href="/Profile">
+            <i className="fa fa-phone" />
+          </a>
+        </Tooltip>
       </List.Item>
     );
   }
 
   if (skype) {
     skypeIcon = (
       <List.Item className="list-inline-item">
-        <a href="/Profile" data-original-title="@skypename">
-          <i className="fa fa-skype" />
-        </a>
+        <Tooltip content="@skypename" placement="top">
+          <a href="/Profile">
+            <i className="fa fa-skype" />
+          </a>
+        </Tooltip>
       </List.Item>
     );
   }