Tooltip

Tooltips display informative text when users hover over, focus on, or tap an element. - Material Docs

import { Tooltip } from 'material-bread';

Tooltip s display text above, below, or on either side of the element provided. On native, you can click to open a tooltip and click anywhere to close it.

HOVER ME

Live Editing

class Demo extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <View style={{position: 'relative'}}>
        <Tooltip content={"I'm a tooltip"}>
          <Button
            type="contained"
            text={'Hover me'}
          />
        </Tooltip>
      </View>
    );
  }
}

import React, { Component } from 'react';
import { View } from 'react-native';
import { Tooltip, Button } from 'material-bread';

class Demo extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <View >
        <Tooltip content={"I'm a tooltip"}>
          <Button
            type="contained"
            text={'Hover me'}
          />
        </Tooltip>
      </View>
    );
  }
}

Name

Description

Type

Default

content

Text Content for tooltip

string

style

Styles root element

object

tooltipPosition

Position for the tooltip: top, bottom, left, right

string

top

Tooltip

Component #

Usage #

Props #