feat: vote buttons add tips

i18n/en_US.yaml

@@ -525,6 +525,7 @@ ui:
     tip_answer: >-
       Use comments to reply to other users or notify them of changes. If you are
       adding new information, edit your post instead of commenting.
+    tip_vote: It adds something useful to the post
   edit_answer:
     title: Edit Answer
     default_reason: Edit answer
@@ -784,6 +785,11 @@ ui:
     answered: answered
     closed_in: Closed in
     show_exist: Show existing question.
+    useful: Useful
+    question_useful: It is useful and clear
+    question_un_useful: It is unclear or not useful
+    answer_useful: It is useful
+    answer_un_useful: It is not useful
     answers:
       title: Answers
       score: Score

ui/src/components/Actions/index.tsx

@@ -1,5 +1,5 @@
 import { memo, FC, useState, useEffect } from 'react';
-import { Button, ButtonGroup } from 'react-bootstrap';
+import { Button, ButtonGroup, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import classNames from 'classnames';
@@ -12,6 +12,7 @@ import { bookmark, postVote } from '@/services';
 
 interface Props {
   className?: string;
+  source: 'question' | 'answer';
   data: {
     id: string;
     votesCount: number;
@@ -24,7 +25,7 @@ interface Props {
   };
 }
 
-const Index: FC<Props> = ({ className, data }) => {
+const Index: FC<Props> = ({ className, data, source }) => {
   const [votes, setVotes] = useState(0);
   const [like, setLike] = useState(false);
   const [hate, setHated] = useState(false);
@@ -101,21 +102,40 @@ const Index: FC<Props> = ({ className, data }) => {
   return (
     <div className={classNames(className)}>
       <ButtonGroup>
-        <Button
-          variant="outline-secondary"
-          active={like}
-          onClick={() => handleVote('up')}>
-          <Icon name="hand-thumbs-up-fill" />
-        </Button>
+        <OverlayTrigger
+          overlay={
+            <Tooltip>
+              {source === 'question'
+                ? t('question_detail.question_useful')
+                : t('question_detail.answer_useful')}
+            </Tooltip>
+          }>
+          <Button
+            variant="outline-secondary"
+            active={like}
+            onClick={() => handleVote('up')}>
+            <Icon name="hand-thumbs-up-fill me-2" />
+            <span>{t('question_detail.useful')}</span>
+          </Button>
+        </OverlayTrigger>
         <Button variant="outline-secondary" className="opacity-100" disabled>
           {votes}
         </Button>
-        <Button
-          variant="outline-secondary"
-          active={hate}
-          onClick={() => handleVote('down')}>
-          <Icon name="hand-thumbs-down-fill" />
-        </Button>
+        <OverlayTrigger
+          overlay={
+            <Tooltip>
+              {source === 'question'
+                ? t('question_detail.question_un_useful')
+                : t('question_detail.answer_un_useful')}
+            </Tooltip>
+          }>
+          <Button
+            variant="outline-secondary"
+            active={hate}
+            onClick={() => handleVote('down')}>
+            <Icon name="hand-thumbs-down-fill" />
+          </Button>
+        </OverlayTrigger>
       </ButtonGroup>
       {!data?.hideCollect && (
         <Button

ui/src/components/Comment/components/ActionBar/index.tsx

@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { Button, Dropdown } from 'react-bootstrap';
+import { Button, Dropdown, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
@@ -31,14 +31,19 @@ const ActionBar = ({
         )}
         <span className="mx-1">•</span>
         <FormatTime time={createdAt} className="me-3" />
-        <Button
-          variant="link"
-          size="sm"
-          className={`me-3 btn-no-border p-0 ${isVote ? '' : 'link-secondary'}`}
-          onClick={onVote}>
-          <Icon name="hand-thumbs-up-fill" />
-          {voteCount > 0 && <span className="ms-2">{voteCount}</span>}
-        </Button>
+        <OverlayTrigger
+          overlay={<Tooltip className="comment-tip">{t('tip_vote')}</Tooltip>}>
+          <Button
+            variant="link"
+            size="sm"
+            className={`me-3 btn-no-border p-0 ${
+              isVote ? '' : 'link-secondary'
+            }`}
+            onClick={onVote}>
+            <Icon name="hand-thumbs-up-fill" />
+            {voteCount > 0 && <span className="ms-2">{voteCount}</span>}
+          </Button>
+        </OverlayTrigger>
         <Button
           variant="link"
           size="sm"

ui/src/components/Comment/index.scss

@@ -21,3 +21,9 @@
     }
   }
 }
+
+.comment-tip {
+  .tooltip-inner {
+    max-width: fit-content;
+  }
+}

ui/src/pages/Questions/Detail/components/Answer/index.tsx

@@ -83,6 +83,7 @@ const Index: FC<Props> = ({
       />
       <div className="d-flex align-items-center mt-4">
         <Actions
+          source="answer"
           data={{
             id: data?.id,
             isHate: data?.vote_status === 'vote_down',

ui/src/pages/Questions/Detail/components/Question/index.tsx

@@ -114,6 +114,7 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer, isLogged }) => {
 
       <Actions
         className="mt-4"
+        source="question"
         data={{
           id: data?.id,
           isHate: data?.vote_status === 'vote_down',