Added tooltip text-wrap capability

mattermost-plugin/server/manifest.go

@@ -45,8 +45,7 @@ const manifestStr = `
         "type": "bool",
         "help_text": "This allows board editors to share boards that can be accessed by anyone with the link.",
         "placeholder": "",
-        "default": false,
-        "hosting": ""
+        "default": false
       }
     ]
   }

webapp/src/components/centerPanel.tsx

@@ -87,7 +87,7 @@ const initialValueCategoryValue: StatusCategory[] = [
             color: '--sys-dnd-indicator-rgb',
             text: {
                 id: 'statusProperty.configDialog.todo.emptyText',
-                defaultMessage: 'Drag statuses here to consider tasks with these statuses “Not Started”',
+                defaultMessage: 'Drag statuses here to\n consider tasks with these\n statuses “Not Started”',
             },
         },
     },

webapp/src/components/standardProperties/statusProperty/editStatusDialog.scss

@@ -53,6 +53,10 @@
                     background: rgba(var(--center-channel-color-rgb), 0.1);
                 }
             }
+
+            .octo-tooltip.tooltip-bottom:hover::after {
+                width: 180px;
+            }
         }
 
         .categorySwimlane_ValueArea {

webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx

@@ -192,6 +192,8 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
                                             id: valueCategory.emptyState.text.id,
                                             defaultMessage: valueCategory.emptyState.text.defaultMessage,
                                         })}
+                                        placement='bottom'
+                                        wrap={true}
                                     >
                                         <InfoIcon/>
                                     </Tooltip>

webapp/src/widgets/tooltip.scss

@@ -47,10 +47,19 @@ $tooltop-vertical-offset: 2px;
     position: relative;
     // Arrow gets added before content
     &:hover::before {
-        @extend %hover-tooltip-arrow; }
+        @extend %hover-tooltip-arrow;
+    }
     // Tooltip message gets added after content
     &:hover::after {
-        @extend %hover-tooltip-body; }
+        @extend %hover-tooltip-body;
+    }
+
+    &.wrap {
+        &:hover::after {
+            word-break: break-word;
+            white-space: unset;
+        }
+    }
 
     // Top tooltip arrow style
     &.tooltip-top:hover::before {

webapp/src/widgets/tooltip.tsx

@@ -1,5 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
+
 import React from 'react'
 
 import './tooltip.scss'
@@ -8,6 +9,7 @@ type Props = {
     title: string
     children: React.ReactNode
     placement?: 'top'|'left'|'right'|'bottom'
+    wrap?: boolean
 }
 
 // Adds tooltip div over children elements, the popup will
@@ -15,7 +17,7 @@ type Props = {
 // Default position is 'top'
 function Tooltip(props: Props): JSX.Element {
     const placement = props.placement || 'top'
-    const className = `octo-tooltip tooltip-${placement}`
+    const className = `octo-tooltip tooltip-${placement}${props.wrap ? ' wrap' : ''}`
     return (
         <div
             className={className}