Merge pull request #1263 from ReactTooltip/copilot/fix-border-overlap-issue

Fix arrow shoulder corners bleeding outside tooltip border

Author: danielbarion

.github/workflows/beta-release.yaml

@@ -1,21 +1,28 @@
 name: Beta Release
 
 on:
-  workflow_call:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
 
 jobs:
   beta_release:
+    if: github.event.pull_request.draft == false && github.event.pull_request.head.repo.fork == false
     runs-on: ubuntu-latest
+    concurrency:
+      group: beta-release-${{ github.event.pull_request.number }}
+      cancel-in-progress: true
     permissions:
       contents: read
       id-token: write
+      issues: write
+      pull-requests: write
     steps:
       - uses: actions/checkout@v4
         with:
           ref: ${{ github.head_ref }}
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '24.14.0'
           registry-url: 'https://registry.npmjs.org'
           cache: 'yarn'
 
@@ -36,7 +43,14 @@ jobs:
           GITHUB_PR_NUMBER: ${{ github.event.pull_request.number }}
 
       - name: Release a new beta version
-        run: npm publish --tag beta --provenance --access public
+        run: npm publish --tag beta --access public
+
+      - name: Upload npm debug logs
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: npm-debug-logs
+          path: /home/runner/.npm/_logs
 
       - uses: actions/github-script@v6
         with:

.github/workflows/bundlesize.yaml

@@ -12,15 +12,6 @@ jobs:
     if: 'github.event.pull_request.draft == false'
     uses: ./.github/workflows/lint.yaml
 
-  bundlesize:
-    if: 'github.event.pull_request.draft == false'
-    uses: ./.github/workflows/bundlesize.yaml
-
-  beta_release:
-    uses: ./.github/workflows/beta-release.yaml
-    # allow the children job to have access to the secrets of the repository
-    secrets: inherit
-
   fail_if_pull_request_is_draft:
     if: github.event.pull_request.draft == true
     runs-on: ubuntu-18.04

.github/workflows/pull-request.yaml

@@ -12,17 +12,18 @@
     "stylelint": "stylelint \"src/**/*.css\"",
     "prettier": "prettier --config ./.prettierrc.json --write \"src/**/*{.js,.jsx,.ts,.tsx,.css}\"",
     "prepare": "husky install",
-    "bundlesize": "bundlesize",
     "esbuild": "esbuild",
     "test": "jest",
-    "postbuild": "npm run types && npm run bundlesize",
     "prepublishOnly": "npm run build"
   },
   "types": "dist/react-tooltip.d.ts",
   "license": "MIT",
   "private": false,
   "author": "ReactTooltip",
-  "repository": "https://github.com/ReactTooltip/react-tooltip",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ReactTooltip/react-tooltip"
+  },
   "keywords": [
     "react",
     "react-component",
@@ -64,7 +65,6 @@
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "5.54.0",
     "@typescript-eslint/parser": "5.54.0",
-    "bundlesize": "^0.18.1",
     "css-loader": "6.7.3",
     "esbuild": "0.17.11",
     "esbuild-css-modules-plugin": "^2.7.1",

package.json

@@ -926,7 +926,15 @@ const Tooltip = ({
       }}
       ref={tooltipRef}
     >
-      {actualContent}
+      <WrapperElement
+        className={classNames(
+          'react-tooltip-content-wrapper',
+          coreStyles['content'],
+          styles['content'],
+        )}
+      >
+        {actualContent}
+      </WrapperElement>
       <WrapperElement
         className={classNames(
           'react-tooltip-arrow',

src/components/Tooltip/Tooltip.tsx

@@ -15,6 +15,13 @@
   position: absolute;
   background: inherit;
   z-index: -1;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
 }
 
 .noArrow {

src/components/Tooltip/core-styles.module.css

@@ -1,10 +1,15 @@
 .tooltip {
-  padding: 8px 16px;
   border-radius: 3px;
   font-size: 90%;
   width: max-content;
 }
 
+.content {
+  background: inherit;
+  border-radius: inherit;
+  padding: 8px 16px;
+}
+
 .arrow {
   width: var(--rt-arrow-size);
   height: var(--rt-arrow-size);

src/components/Tooltip/styles.module.css

@@ -79,7 +79,7 @@ const computeTooltipPosition = async ({
         right: '',
         bottom: '',
         ...borderSide,
-        [staticSide]: `-${arrowSize / 2 + borderWidth}px`,
+        [staticSide]: `-${arrowSize / 2 + borderWidth - 1}px`,
       }
       /* c8 ignore end */