fix(message-input): tooltip should be displayed when character limit has been reached

recipes/conversation_view/message_input/message_input.stories.js

@@ -79,6 +79,7 @@ export const argsData = {
   placeholder: 'New message',
   inputAriaLabel: 'Input text field',
   noticeMessage: 'Files must be less than 32 MB to be sent as Dialpad messages.',
+  characterLimitWarningMessage: 'You have reached the character limit.',
   onSubmit: action('submit'),
   onFocus: action('focus'),
   onBlur: action('blur'),

recipes/conversation_view/message_input/message_input.vue

@@ -145,13 +145,24 @@
         <!-- Right content -->
         <div class="d-d-flex">
           <!-- Optionally displayed remaining character counter -->
-          <p
+          <dt-tooltip
             v-if="displayCharacterLimitWarning"
-            class="d-fc-error d-mr16 d-as-center dt-message-input--remaining-char"
-            data-qa="dt-message-input-character-limit"
+            :enabled="characterLimitWarningMessage && (characterLimitCount - inputLength < 0)"
+            placement="top-end"
+            :message="characterLimitWarningMessage"
+            :offset="[10, -8]"
           >
-            {{ characterLimitCount - inputLength }}
-          </p>
+            <template #anchor>
+              <p
+                v-if="displayCharacterLimitWarning"
+                class="d-fc-error d-mr16 d-as-center dt-message-input--remaining-char"
+                data-qa="dt-message-input-character-limit"
+              >
+                {{ characterLimitCount - inputLength }}
+              </p>
+            </template>
+          </dt-tooltip>
+
           <dt-tooltip
             placement="top-end"
             :message="sendTooltipLabel"
@@ -363,6 +374,14 @@ export default {
       default: 500,
     },
 
+    /**
+     * Character limit warning message
+     */
+    characterLimitWarningMessage: {
+      type: String,
+      default: '',
+    },
+
     // Error related props
 
     /**

recipes/conversation_view/message_input/message_input_default.story.vue

@@ -15,6 +15,7 @@
       :has-character-limit="$attrs.hasCharacterLimit"
       :character-limit-count="$attrs.characterLimitCount"
       :character-limit-warning="$attrs.characterLimitWarning"
+      :character-limit-warning-message="$attrs.characterLimitWarningMessage"
       :notice-kind="$attrs.noticeKind"
       :notice-message="$attrs.noticeMessage"
       :emoji-tab-set-labels="$attrs.emojiTabSetLabels"