Skip to content
Synchronicity

Tooltip

Tooltip displays contextual information when users interact with an element. Use for brief explanations that don’t need to be visible at all times.

Preview

Section titled “Preview”
Three coins are tossed six times to build a hexagram
ℹ️

Basic Usage

Section titled “Basic Usage”
Tap to learn more
ℹ️
<Tooltip content="Tap to learn more">
  <IconButton icon="info" accessibilityLabel="Info" />
</Tooltip>

Positions

Section titled “Positions”
Top
↑
Bottom
↓
Left
←
Right
→
<Tooltip content="Above the element" position="top">
  <Button>Top</Button>
</Tooltip>


<Tooltip content="Below the element" position="bottom">
  <Button>Bottom</Button>
</Tooltip>


<Tooltip content="Left of the element" position="left">
  <Button>Left</Button>
</Tooltip>


<Tooltip content="Right of the element" position="right">
  <Button>Right</Button>
</Tooltip>

With Different Triggers

Section titled “With Different Triggers”
Icon tooltip
?
Button tooltip
Hover me
Text tooltip
Learn more
// With IconButton
<Tooltip content="Get help">
  <IconButton icon="help" accessibilityLabel="Help" />
</Tooltip>


// With Button
<Tooltip content="Submit your reading">
  <Button>Submit</Button>
</Tooltip>


// With Text
<Tooltip content="Click to see full explanation">
  <Text style={styles.link}>Learn more</Text>
</Tooltip>

Use Cases

Section titled “Use Cases”

Feature Explanation

Section titled “Feature Explanation”
Changing Lines
Lines marked with ○ or × are changing and indicate movement in your situation
ℹ️

Form Field Help

Section titled “Form Field Help”
Your Question
Focus on open-ended questions rather than yes/no
?
What should I focus on this week?

API Reference

Section titled “API Reference”

Props

Section titled “Props”
PropTypeDefaultDescription
contentstringRequiredTooltip text
childrenReactElementRequiredTrigger element
position'top' | 'bottom' | 'left' | 'right''top'Position relative to trigger
styleViewStyle-Custom styles

Complete Example

Section titled “Complete Example”
import { Tooltip, IconButton, Card, Text, Badge } from '@synchronicity/react-native';
import { View, StyleSheet } from 'react-native';


function HexagramCard({ hexagram }) {
  return (
    <Card>
      <View style={styles.header}>
        <View style={styles.titleRow}>
          <Text style={styles.name}>{hexagram.name}</Text>
          {hexagram.hasChangingLines && (
            <Tooltip
              content="This hexagram has changing lines that indicate transformation"
              position="bottom"
            >
              <Badge variant="gold" size="sm">
                Changing
              </Badge>
            </Tooltip>
          )}
        </View>


        <Tooltip
          content={`Hexagram #${hexagram.number} - ${hexagram.chinese}`}
          position="left"
        >
          <IconButton
            icon="info"
            variant="ghost"
            size="sm"
            accessibilityLabel="Hexagram info"
          />
        </Tooltip>
      </View>


      <View style={styles.trigrams}>
        <View style={styles.trigramLabel}>
          <Text style={styles.trigramName}>{hexagram.upperTrigram.name}</Text>
          <Tooltip
            content={hexagram.upperTrigram.description}
            position="right"
          >
            <Text style={styles.trigramHelp}>?</Text>
          </Tooltip>
        </View>


        <View style={styles.trigramLabel}>
          <Text style={styles.trigramName}>{hexagram.lowerTrigram.name}</Text>
          <Tooltip
            content={hexagram.lowerTrigram.description}
            position="right"
          >
            <Text style={styles.trigramHelp}>?</Text>
          </Tooltip>
        </View>
      </View>
    </Card>
  );
}


const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
  },
  titleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  name: {
    fontSize: 20,
    fontWeight: '600',
  },
  trigrams: {
    marginTop: 16,
    gap: 8,
  },
  trigramLabel: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
  trigramName: {
    fontSize: 14,
  },
  trigramHelp: {
    fontSize: 12,
    color: '#8a8a9a',
  },
});