how to do custom closeButton backgroundImage?

[uyriq]

I'm trying to change default closeButton X mark for an svg (red circle with x mark too) by imported cross.svg

<Joyride
        steps={steps}
        run={run}
        continuous={false}
        hideCloseButton={false}
        showProgress={false}
        showSkipButton={false}
        styles={{
          buttonClose: {
            backgroundImage: `url(${Cross})`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover",
            width: 24,
            height: 24,
          },
          // hide this button
          buttonNext: {
            display: "none",
          },

          tooltipContainer: {
            textAlign: "left",
          },
          tooltip: {
            background: "#fff",
            borderRadius: 8,
            color: "#000",
            textAlign: "left",
            padding: "1rem",
            width: 418,
          },
        }}
      />

[gilbarbara]

Hey @uyriq
You didn't mention what is the problem...
Also, please create a codesandbox with a minimal reproducible example if you expect people to help.

[uyriq]

https://vfxh6k-3000.csb.app/

I managed to replace closeButton with inline svg (src\app(landing)\components\err-popover.tsx), I'm not sure if this is the right solution, but at least it works wirh 1920x1080.
For this codesandbox example, where I use react.state to store mock error value and then show with joyride popover I would also like to know how to clearup DownloadError when closing the popover? (src\app(landing)\page.tsx)

[gilbarbara]

@uyriq

The button hasn't changed its position, so your close button is only half-clickable. Have you considered using a custom tooltip?
Can you post the link to the codesandbox instead of just the preview URL?
I couldn't grasp what you were trying to do. Is it a single tooltip? Maybe react-floater would be a better option.

[uyriq]

thanks for asking about the sandbox link.
here it is: https://codesandbox.io/p/sandbox/github/uyriq/snxtw/tree/main
although this shouldn't be relevant, it turns out that codesandbox.io has two types of sandbox.io/p which are cloud sandbox and
sandbox.io/s for web sandboxes I usually use s but for this example I tried cloud which is codesandbox.io/p based on .devcontainer/devcontainer.json
and yes, it's possible that for my simple popover task, react-floater would be a better fit.

[uyriq]

thanks for advise me react-floater, it works flawlessly ( snxtw/react-floater-example ). the one thing that i dont know how to set style for borderRadius 8px to round a bit rectangle popover?

[gilbarbara]

Check the styles docs in the README.

[uyriq]

The reason why change of the borderRadius is impossible is due to the code in node_modules\react-floater\dist\index.js.
the component has the following props: content, title, footer, but it seems to be missing the container props
so i don't know how to use floater without a patch. something like borderRadius: '0.25rem',

[gilbarbara]

Check this example: https://codesandbox.io/s/github/gilbarbara/react-floater/tree/main/demo?file=/src/examples/WithCustomStyles.tsx

[uyriq]

Thanks!