feat(mediabodysocial): add tooltip to media icons

this adds a new tooltip to all media icons in the media body component #114
tabler · May 25, 2018 · e7e9f3a · e7e9f3a
1 parent 90dca54
commit e7e9f3a
Showing 1 changed file with 21 additions and 13 deletions.
diff --git a/src/components/Media/MediaBodySocial.react.js b/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>
     );
   }