Problem with using string variable on React-bootstrap's OverlayTrigger placement attribute

The placement variable for OverlayTrigger is a type which is declared as Placement, you are able to inspect any type if you want for more information (e.g. by pressing F12 on the input variable).

For your example you are able to specify placement with string value "bottom" because this value is derived from BasePlacement "right" | "top" | "bottom" | "left" and the value is able to resolve to this type.

However when trying to set your variable {tooltipPlacement} it is resolved as type of string, because this is what it's declared as, your compiler gives you this information.

Type 'string' is not assignable to type 'Placement | undefined'.ts(2322)

Solution

One way to solve this is to tell the compiler what type you want to cast this variable to, you know that "bottom" is a valid value to resolve to type of Placement.

placement={tooltipPlacement as Placement}