Update Tooltip implementation for Flipper

Summary:
Basic tooltips available. Use is:

  <Tooltip
     title="This is what will show up inside the tooltip"
     options={{ // can include any or none of these (if not included default will be used)
        position, // 'above', 'below', 'toRight', or 'toLeft'
        showTail, // whether or not tooltip should have tail
        delay, // how long to wait on hover before showing tooltip
        // supported css properties
        backgroundColor,
        color,
        maxWidth,
        width,
        borderRadius,
        padding,
        lineHeight,
     }}>
     <ElementTooltipWillShowUpFor/>
  </Tooltip>

Reviewed By: danielbuechele

Differential Revision: D9596287

fbshipit-source-id: 233b1ad01b96264bbc1f62f3798e3d69d1ab4bae

src/ui/components/data-inspector/DataInspector.js

@@ -8,6 +8,7 @@
 import DataDescription from './DataDescription.js';
 import {Component} from 'react';
 import ContextMenu from '../ContextMenu.js';
+import Tooltip from '../Tooltip.js';
 import styled from '../../styled/index.js';
 import DataPreview from './DataPreview.js';
 import createPaste from '../../../utils/createPaste.js';
@@ -52,6 +53,11 @@ export const InspectorName = styled('span')({
   color: colors.grapeDark1,
 });
 
+const nameTooltipOptions = {
+  position: 'toLeft',
+  showTail: true,
+};
+
 export type DataValueExtractor = (
   value: any,
   depth: number,
@@ -525,9 +531,12 @@ export default class DataInspector extends Component<DataInspectorProps> {
     const nameElems = [];
     if (typeof name !== 'undefined') {
       nameElems.push(
-        <InspectorName key="name" title={(tooltips && tooltips[name]) || ''}>
-          {name}
-        </InspectorName>,
+        <Tooltip
+          title={tooltips && tooltips[name]}
+          key="name"
+          options={nameTooltipOptions}>
+          <InspectorName>{name}</InspectorName>
+        </Tooltip>,
       );
       nameElems.push(<span key="sep">: </span>);
     }