The children for this component should either be a function or a single
element. When the children is a single React element, this component will
clone in an id, aria-describedby, and all the event handlers required
to show and hide a tooltip relative to that element. This means that you
will need to ensure that the child component accepts and passes down the
on* event handlers to a DOM node as well as the id and
aria-describedby for accessibility. Every component within react-md
should do this by default.
If the children is a function, the id, aria-describedby, and event
handlers will be provided as well as a new tooltip prop so that you have
more control over rendering the tooltip.
If the tooltip prop was not provided to this component, the
aria-describedby and the event handlers will be omitted.
An optional className for the tooltip
An optional position to use before the positioning calculation has occurred. This is also used to determine if the position should be horizontal vs vertical.
Vertical - "below" or "above"
Horizontal - "left" or "right"
Boolean if the tooltip is using the dense spec. This will reduce the padding, margin and font size for the tooltip and is usually used for desktop displays.
The amount of spacing to use for a dense tooltip. This is the distance between the container element and the tooltip.
Since react-md provides mixins to automatically apply a dense spec
through mixins via media queries, the dense spec might be applied in css
instead of in JS. This component will actually check the current spacing
amount that has been applied when the tooltip becomes visible.
If this behavior is not desired, you can enable this prop and it will only
use the provided spacing or denseSpacing props based on the dense
prop.
Note: This will be defaulted to true when the
process.env.NODE_ENV === 'test' since test environments normally don't
have a default window.getComgetComputedStyle value that is not NaN
which will display errors in your tests.
Boolean if the hover mode functionality should be disabled for this instance instead of inheriting the value from the HoverModeProvider.
Boolean if the auto-swapping behavior should be disabled. When this value
is undefined, it'll be treated as true when the position prop is
defined, otherwise false.
The amount of time to wait (in ms) before showing the tooltip after a
keyboard user has triggered a focus event. You probably won't ever need
to change this value.
The id for the element that has a tooltip. This is always required since it
will be passed down to the containerProps in the children renderer
function. It is also used to generate a tooltipId when there is a
tooltip.
Boolean if the tooltip should allow line wrapping. This is disabled by default since the tooltip will display weirdly when its container element is small in size. It is advised to only enable line wrapping when there are long tooltips or the tooltips are bigger than the container element.
Once line wrapping is enabled, you will most likely need to set some additional padding and widths.
An optional event handler to merge with the hover mode visibility hander.
If this function calls event.stopPropagation(), the hover mode behavior
will be disabled.
This function will be called once the TransitionStage has been set
to "enter".
This function will be called once the TransitionStage has been set
to "entering".
This function will be called once the TransitionStage has been set
to "enter".
This function will be called once the TransitionStage has been set
to "entered".
This function will be called once the TransitionStage has been set
to "exited".
This function will be called once the TransitionStage has been set
to "exiting".
An optional event handler to merge with the hover mode visibility hander.
If this function calls event.stopPropagation(), the hover mode behavior
will be disabled.
An optional event handler to merge with the hover mode visibility hander.
If this function calls event.stopPropagation(), the hover mode behavior
will be disabled.
Boolean if the portal should be used.
An optional controlled position to use that will disable the functionality to determine the "best" position to render the tooltip within the viewport.
The amount of spacing to use for a non-dense tooltip. This is the distance between the container element and the tooltip.
An optional style for the tooltip.
{@inheritDoc CSSTransitionHookOptions.temporary}
This value should be between 0 and 1 and will be multiplied by either the viewport height or viewport width to determine the best position to render the tooltip based on available space within the viewport.
You probably won't ever really need to update this value.
The tooltip to display. When this is false-ish, the children renderer will
always return null for the tooltip prop.
The amount of time to wait (in ms) before showing the tooltip after
triggering a touchstart event. You probably won't ever need to change
this value.
The default time is about the same it takes to display the context menu with a "long touch" and cancel displaying the context menu.
This is the viewport height margin to use in the positioning calculation. This is just used so that the tooltip can be placed with some spacing between the top and bottom edges of the viewport if desired.
This is the viewport width margin to use in the positioning calculation. This is just used so that the tooltip can be placed with some spacing between the left and right edges of the viewport if desired.
Generated using TypeDoc
An optional additional
aria-describedbyid or ids to merge with the tooltip id. This is really used for things like notifications or when multiple elements describe your tooltipped element.