Need example code of <Tooltip />; Only <TooltipHost /> examples are available

[thoffmann-fms]

Describe the feature that you would like added

There are two components you can use to display a tooltip:

• Tooltip: A styled tooltip that you can display on a chosen target.
• TooltipHost: A wrapper that automatically shows a tooltip when the wrapped element is hovered or focused.

On page https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip please add an example of how to use the ToolTip component.

What component or utility would this be added to

https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip

[paulgildea]

Thanks for the feedback @timothyhoffmann !

And we'll take this feedback as input when we converge our ToolTip components across our two React libraries. I don't have any specific timelines to share at this time, just trying to set expectations.

Thanks!

[JustSlone]

@timothyhoffmann, can you elaborate on the scenario where you want to use Tooltip component directly?

The interesting logic for tooltips is in TooltipHost component (which we probably should rename to Tooltip actually). The Tooltip component is mostly just a Callout

fluentui/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.base.tsx

Lines 48 to 57 in baa5199

	return (
	<Callout
	target={targetElement}
	directionalHint={directionalHint}
	directionalHintForRTL={directionalHintForRTL}
	{...calloutProps}
	{...getNativeProps(this.props, divProperties, ['id'])} // omitting ID due to it being used in the div below
	className={this._classNames.root}
	>
	<div

[thoffmann-fms]

Given the dearth of documentation on <Tooltip /> I don’t know if I do want to use it or not. If it’s really only usable internally by the developers of <TooltipHost /> then perhaps remove the reference from the documentation. Regards,

[msft-github-bot]

@paulgildea

Gentle ping that this issue needs attention.

[paulgildea]

In reading this issue again. It sounds like the issue here is what should folks be using:

1. Tooltip or 2. TooltipHost.

If 2, then update the documentation to steer folks to that component, If 1 and 2, then create a sample where ToolTip is used.

Is that your expectation @timothyhoffmann ?

[JustSlone]

So, I'm a little confused here. TooltipHost is how developers should use Tooltip. Really in most cases you just want to wrap an element to use as an anchor and have a Tooltip show when the user hovers over this element.

That's why I asked about the scenario here, @timothyhoffmann can you share the scenario you are interested in where you want to use a Tooltip component directly without the convenience of the TooltipHost? That would help understand the use case here so we can identify what is missing.

If you are looking to just simply add Tooltips, the documentation and examples cover the cases on how to use the Fluent UI Tooltip functionality.

[thoffmann-fms]

Given the dearth of documentation on Tooltip I don’t know if I do want to use it or not. I don't have a scenario to use something if I don't understand what it does. If it’s really only usable internally by the developers of TooltipHost then perhaps remove the reference to ToolTip being the first item document at the top of the documentation where it's prominent:

There are two components you can use to display a tooltip:

Tooltip: A styled tooltip that you can display on a chosen target.
TooltipHost: A wrapper that automatically shows a tooltip when the wrapped element is hovered or focused.

[JustSlone]

Got it. I thought there was something that Tooltip was needed for that the documentation was falling short on.

Yeah, I agree that just cleaning up the documentation is the right thing to do here. We'll be updating Tooltip in the future, this issue is a good thing to keep in mind as part of that update as well. I'll add this to the epic issue.

Proposed fix:

• Update docs here: https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip
• Remove mention of Tooltip, or call out that using Tooltip directly is an advanced case
• Add mention that Tooltip in most cases is invoked by using TooltipHost

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.