fix(slider): update rc-slider [EE-5011] (#8611)

* fix(slider): update rc-slider [EE-5011]

* fix PasswordLengthSlider tooltip

* fix unnecessarily bulky className for SliderTooltip

* remove SliderTooltip inner div

* center slider handle value

* relative tooltip

* update z index

---------

Co-authored-by: testa113 <testa113>

app/react/components/Tip/SliderTooltip/SliderTooltip.module.css

@@ -0,0 +1,30 @@
+:global(portainer-tooltip) {
+  @apply inline-flex;
+}
+
+.tooltip {
+  background-color: var(--bg-tooltip-color) !important;
+  color: var(--text-tooltip-color) !important;
+  border-radius: 10px !important;
+  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
+  max-width: 400px;
+  min-width: 50px;
+  font-size: 1rem !important;
+  font-weight: 400;
+  text-align: left;
+  width: max-content;
+}
+
+.tooltip-container {
+  line-height: 18px;
+  padding: 8px 10px !important;
+  font-size: 12px !important;
+}
+
+.tooltip-centered .tooltip-container {
+  text-align: center;
+}
+
+.tooltip-message a {
+  color: var(--blue-15) !important;
+}

app/react/components/Tip/SliderTooltip/SliderTooltip.tsx

@@ -0,0 +1,42 @@
+import Tippy from '@tippyjs/react';
+import clsx from 'clsx';
+
+import 'tippy.js/dist/tippy.css';
+
+import styles from './SliderTooltip.module.css';
+
+export interface Props {
+  value: string;
+  child: React.ReactElement;
+  delay: number;
+  zIndex?: number;
+}
+
+export function SliderTooltip({ value, child, delay, zIndex = 50 }: Props) {
+  return (
+    <Tippy
+      appendTo="parent"
+      zIndex={zIndex} // make the z index lower than the dialog
+      className={clsx(styles.tooltipCentered, styles.tooltip)}
+      content={messageHTML(value)}
+      placement="top"
+      showOnCreate
+      hideOnClick={false}
+      trigger="manual"
+      delay={delay}
+      arrow
+      allowHTML
+    >
+      {child}
+    </Tippy>
+  );
+}
+
+function messageHTML(value: string) {
+  let message = value;
+  if (message === '0') {
+    message = 'unlimited';
+  }
+
+  return <div className={styles.tooltipContainer}>{message}</div>;
+}

app/react/components/Tip/SliderTooltip/index.ts

@@ -0,0 +1 @@
+export { SliderTooltip } from './SliderTooltip';