diff --git a/.gitignore b/.gitignore
index 5813369d59..116ccc5725 100644
--- a/.gitignore
+++ b/.gitignore
@@ -64,3 +64,6 @@ CHANGELOG.md
lib/
.expo
+
+# yarn
+.yarn
diff --git a/example/src/Examples/TooltipExample.tsx b/example/src/Examples/TooltipExample.tsx
index 011d7c6692..2196f4a234 100644
--- a/example/src/Examples/TooltipExample.tsx
+++ b/example/src/Examples/TooltipExample.tsx
@@ -10,6 +10,7 @@ import {
FAB,
IconButton,
List,
+ TextInput,
ToggleButton,
Tooltip,
Card,
@@ -148,6 +149,30 @@ const TooltipExample = ({ navigation }: Props) => {
+
+ (
+
+ {}}
+ />
+
+ )}
+ />
+ }
+ />
+
+
@@ -181,6 +206,9 @@ const styles = StyleSheet.create({
cardContainer: {
margin: 16,
},
+ textInput: {
+ margin: 16,
+ },
toggleButtonRow: {
paddingHorizontal: 16,
},
@@ -188,4 +216,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
flexWrap: 'wrap',
},
+ listBottomMargin: {
+ marginBottom: 128,
+ },
});
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index e3a051b397..c78f20104b 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -1,11 +1,11 @@
import * as React from 'react';
import {
Dimensions,
- View,
LayoutChangeEvent,
- StyleSheet,
Platform,
Pressable,
+ StyleSheet,
+ View,
ViewStyle,
} from 'react-native';
@@ -42,6 +42,10 @@ export type Props = {
* @optional
*/
theme?: ThemeProp;
+ /**
+ * Whether the tooltip should be displayed on touch instead long press on mobile.
+ */
+ touchToDisplay?: boolean;
};
/**
@@ -67,6 +71,7 @@ const Tooltip = ({
children,
enterTouchDelay = 500,
leaveTouchDelay = 1500,
+ touchToDisplay = false,
title,
theme: themeOverrides,
titleMaxFontSizeMultiplier,
@@ -155,13 +160,18 @@ const Tooltip = ({
const mobilePressProps = {
onPress: React.useCallback(() => {
+ if (touchToDisplay) {
+ touched.current = true;
+ setVisible(true);
+ return null;
+ }
if (touched.current) {
return null;
} else {
if (children.props.disabled) return null;
return children.props.onPress?.();
}
- }, [children.props]),
+ }, [children.props, touchToDisplay]),
onLongPress: () => handleTouchStart(),
onPressOut: () => handleTouchEnd(),
delayLongPress: enterTouchDelay,