fix(Tooltip): *-start and *-end placements work correctly

react-bootstrap · Jul 9, 2020 · 1c99fec · 1c99fec
1 parent 77f105a
commit 1c99fec
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/Popover.tsx b/src/Popover.tsx
@@ -94,16 +94,18 @@ const Popover: Popover = (React.forwardRef<HTMLDivElement, PopoverProps>(
     ref,
   ) => {
     const decoratedBsPrefix = useBootstrapPrefix(bsPrefix, 'popover');
+    const [primaryPlacement] = placement?.split('-') || [];
+
     return (
       <div
         ref={ref}
         role="tooltip"
         style={style}
-        x-placement={placement}
+        x-placement={primaryPlacement}
         className={classNames(
           className,
           decoratedBsPrefix,
-          `bs-popover-${placement}`,
+          `bs-popover-${primaryPlacement}`,
         )}
         {...props}
       >

diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
@@ -99,13 +99,19 @@ const Tooltip: Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
   ) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'tooltip');
 
+    const [primaryPlacement] = placement?.split('-') || [];
+
     return (
       <div
         ref={ref}
         style={style}
         role="tooltip"
-        x-placement={placement}
-        className={classNames(className, bsPrefix, `bs-tooltip-${placement}`)}
+        x-placement={primaryPlacement}
+        className={classNames(
+          className,
+          bsPrefix,
+          `bs-tooltip-${primaryPlacement}`,
+        )}
         {...props}
       >
         <div className="arrow" {...arrowProps} />