Add single option votes tooltip in polls (#16849)

Adds a tooltip when hovering over the percentages in a poll showing how
many votes were cast for that option.

Also removes descriptions from messages here since they are not picked
up by Crowdin anyway and might be confusing to other developers :)

Fixes #16820

1 files changed, 22 insertions, 5 deletions

diff --git a/app/javascript/mastodon/components/poll.js b/app/javascript/mastodon/components/poll.js
index 477f56e13..85aa28816 100644
--- a/app/javascript/mastodon/components/poll.js
+++ b/app/javascript/mastodon/components/poll.js
@@ -12,8 +12,18 @@ import RelativeTimestamp from './relative_timestamp';
 import Icon from 'mastodon/components/icon';
 
 const messages = defineMessages({
-  closed: { id: 'poll.closed', defaultMessage: 'Closed' },
-  voted: { id: 'poll.voted', defaultMessage: 'You voted for this answer', description: 'Tooltip of the "voted" checkmark in polls' },
+  closed: {
+    id: 'poll.closed',
+    defaultMessage: 'Closed',
+  },
+  voted: {
+    id: 'poll.voted',
+    defaultMessage: 'You voted for this answer',
+  },
+  votes: {
+    id: 'poll.votes',
+    defaultMessage: '{votes, plural, one {# vote} other {# votes}}',
+  },
 });
 
 const makeEmojiMap = record => record.get('emojis').reduce((obj, emoji) => {
@@ -148,9 +158,16 @@ class Poll extends ImmutablePureComponent {
               data-index={optionIndex}
             />
           )}
-          {showResults && <span className='poll__number'>
-            {Math.round(percent)}%
-          </span>}
+          {showResults && (
+            <span
+              className='poll__number'
+              title={intl.formatMessage(messages.votes, {
+                votes: option.get('votes_count'),
+              })}
+            >
+              {Math.round(percent)}%
+            </span>
+          )}
 
           <span
             className='poll__option__text translate'