fix: #5613, TreeSelect: TreeSelect component is not supporting toolti…

…ps and is an issue in multiple select mode. (#5615)

Co-authored-by: Akshay Antony <[email protected]>

components/lib/treeselect/TreeSelect.js

@@ -11,6 +11,7 @@ import { Tree } from '../tree/Tree';
 import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils';
 import { TreeSelectBase } from './TreeSelectBase';
 import { TreeSelectPanel } from './TreeSelectPanel';
+import { Tooltip } from '../tooltip/Tooltip';
 
 export const TreeSelect = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -33,6 +34,7 @@ export const TreeSelect = React.memo(
         const hasNoOptions = ObjectUtils.isEmpty(props.options);
         const isSingleSelectionMode = props.selectionMode === 'single';
         const isCheckboxSelectionMode = props.selectionMode === 'checkbox';
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
 
         const metaData = {
             props,
@@ -744,6 +746,7 @@ export const TreeSelect = React.memo(
                 >
                     {content}
                 </TreeSelectPanel>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} pt={ptm('tooltip')} />}
             </div>
         );
     })

components/lib/treeselect/treeselect.d.ts

@@ -16,6 +16,8 @@ import { TreeNodeTemplateOptions, TreePassThroughOptions, TreeTogglerTemplateOpt
 import { TreeNode } from '../treenode';
 import { FormEvent } from '../ts-helpers';
 import { IconType, PassThroughType } from '../utils/utils';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
 
 export declare type TreeSelectPassThroughType<T> = PassThroughType<T, TreeSelectPassThroughMethodOptions>;
 export declare type TreeSelectPassThroughTransitionType = ReactCSSTransitionProps | ((options: TreeSelectPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
@@ -123,6 +125,11 @@ export interface TreeSelectPassThroughOptions {
      * Used to control React Transition API.
      */
     transition?: TreeSelectPassThroughTransitionType;
+    /**
+     * Uses to pass attributes to the Tooltip component.
+     * @see {@link TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
 }
 
 /**
@@ -524,6 +531,14 @@ export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.Inpu
      * Defines the selection mode, valid values "single", "multiple", and "checkbox".
      */
     selectionMode?: 'single' | 'multiple' | 'checkbox' | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      */