Add Tooltip support (#701)

Libraries/Components/Button.js

@@ -154,6 +154,10 @@ type ButtonProps = $ReadOnly<{|
    * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow",
    */
   validKeysUp?: ?Array<string>,
+  /*
+   * Specifies the Tooltip for the view
+   */
+  tooltip?: string,
   // ]TODO(OSS Candidate ISS#2710739)
 |}>;
 
@@ -211,6 +215,7 @@ class Button extends React.Component<ButtonProps> {
       validKeysDown,
       validKeysUp,
       onKeyUp,
+      tooltip,
     } = this.props;
     const buttonStyles = [styles.button];
     const textStyles = [styles.text];
@@ -261,6 +266,7 @@ class Button extends React.Component<ButtonProps> {
         onKeyUp={onKeyUp}
         validKeysDown={validKeysDown}
         validKeysUp={validKeysUp}
+        tooltip={tooltip}
         touchSoundDisabled={touchSoundDisabled}>
         <View style={buttonStyles}>
           <Text style={textStyles} disabled={disabled}>

Libraries/Components/Slider/Slider.js

@@ -132,6 +132,10 @@ type Props = $ReadOnly<{|
    * Used to locate this view in UI automation tests.
    */
   testID?: ?string,
+  /**
+   * Specifies the tooltip.
+   */
+  tooltip?: ?string,
 |}>;
 
 /**

Libraries/Components/TextInput/TextInput.js

@@ -714,6 +714,10 @@ export type Props = $ReadOnly<{|
   forwardedRef?: ?ReactRefSetter<
     React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
   >,
+  /*
+   * Specifies the tooltip.
+   */
+  tooltip?: ?string,
 |}>;
 
 type ImperativeMethods = $ReadOnly<{|

Libraries/Image/ImageProps.js

@@ -171,4 +171,9 @@ export type ImageProps = {|
 
   src?: empty,
   children?: empty,
+
+  /**
+   * Specifies the Tooltip for the view
+   */
+  tooltip?: ?string,
 |};

Libraries/Text/Text.js

@@ -68,6 +68,7 @@ const viewConfig = {
     onTextLayout: true,
     onInlineViewLayout: true,
     dataDetectorType: true,
+    tooltip: true,
   },
   directEventTypes: {
     topTextLayout: {

Libraries/Text/TextProps.js

@@ -187,4 +187,13 @@ export type TextProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/text.html#supperhighlighting
    */
   suppressHighlighting?: ?boolean,
+
+  /**
+   * macOS Only
+   */
+
+  /**
+   * Specifies the Tooltip for the button view
+   */
+  tooltip?: ?string,
 |}>;

RNTester/js/examples/Tooltip/TooltipExample.js

@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+const React = require('react');
+const {
+  Button,
+  Image,
+  Slider,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} = require('react-native');
+
+const styles = StyleSheet.create({
+  image: {
+    width: 38,
+    height: 38,
+  },
+  textInput: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#0f0f0f',
+    flex: 1,
+    fontSize: 13,
+    padding: 4,
+  },
+  view: {
+    backgroundColor: '#3CE8DA',
+    padding: 10,
+  },
+});
+
+const image = {
+  uri: 'https://www.facebook.com/favicon.ico',
+};
+
+function SliderExample(props: React.ElementConfig<typeof Slider>) {
+  const [value, setValue] = React.useState(0);
+
+  return (
+    <View>
+      <Text>{value.toFixed(3)}</Text>
+      <Slider
+        {...props}
+        onValueChange={newValue => setValue(newValue)}
+        tooltip={value.toFixed(3)}
+      />
+    </View>
+  );
+}
+
+exports.displayName = 'TooltipExample';
+exports.framework = 'React';
+exports.title = 'Tooltip';
+exports.description = 'Examples that showcase tooltip in various components.';
+
+exports.examples = [
+  {
+    title: 'Button',
+    description: ('Simple button to showcase tooltip.': string),
+    render: function(): React.Node {
+      return (
+        <Button
+          title="Hover me"
+          onPress={() => {}}
+          tooltip={'Button tooltip'}
+        />
+      );
+    },
+  },
+  {
+    title: 'Text',
+    description: ('Simple text string to showcase tooltip.': string),
+    render: function(): React.Node {
+      return (
+        <Text tooltip={'Text tooltip'}>
+          Simple text string to showcase tooltip.
+        </Text>
+      );
+    },
+  },
+  {
+    title: 'Image',
+    description: ('Image to showcase tooltip.': string),
+    render: function(): React.Node {
+      return (
+        <Image source={image} style={styles.image} tooltip={'Facebook logo'} />
+      );
+    },
+  },
+  {
+    title: 'View',
+    description: ('Background color view to showcase tooltip.': string),
+    render: function(): React.Node {
+      return <View style={styles.view} tooltip={'Turquoise'} />;
+    },
+  },
+  {
+    title: 'Slider',
+    description: ('Tooltip displays the current value.': string),
+    render(): React.Element<any> {
+      return <SliderExample />;
+    },
+  },
+  {
+    title: 'TextInput',
+    render: function(): React.Node {
+      return <TextInput style={styles.textInput} tooltip={'Name'} />;
+    },
+  },
+];

RNTester/js/utils/RNTesterList.ios.js

@@ -196,6 +196,11 @@ const ComponentExamples: Array<RNTesterExample> = [
     module: require('../examples/TextInput/TextInputExample.ios'),
     supportsTVOS: true,
   },
+  {
+    key: 'TooltipExample',
+    module: require('../examples/Tooltip/TooltipExample'),
+    supportsTVOS: true,
+  },
   {
     key: 'TouchableExample',
     module: require('../examples/Touchable/TouchableExample'),