commit a44aa67ef39dd12f5990451f1a40b2751cee8e69
Author: Jaroslav Hrubý <hrubyj@students.zcu.cz>
Date:   Sun May 15 17:26:34 2022 +0200

    Tag buttons tooltips implemented

diff --git a/webapp/components/annotation/CategoryItem.tsx b/webapp/components/annotation/CategoryItem.tsx
index 845e7a0..b4380cc 100644
--- a/webapp/components/annotation/CategoryItem.tsx
+++ b/webapp/components/annotation/CategoryItem.tsx
@@ -1,6 +1,11 @@
 import { Col, Container, Row, Stack } from 'react-bootstrap';
-import { Button } from 'antd';
-import { DownOutlined, TagOutlined, UpOutlined } from '@ant-design/icons';
+import { Button, Tooltip } from 'antd';
+import {
+    DownOutlined,
+    QuestionCircleOutlined,
+    TagOutlined,
+    UpOutlined,
+} from '@ant-design/icons';
 import { TagCategoryInfo } from '../../api';
 import React, { useState } from 'react';
 import { TagItem } from './TagItem';
@@ -39,6 +44,14 @@ export function CategoryItem(props: { category: TagCategoryInfo }) {
                     className="w-100 text-start rounded"
                 >
                     {props.category.name}
+                    {props.category.description && props.category.description !== '' && (
+                        <Tooltip
+                            title={props.category.description}
+                            key={props.category.description}
+                        >
+                            <QuestionCircleOutlined />
+                        </Tooltip>
+                    )}
                 </Button>
             </Row>
             {visibleTags && (
diff --git a/webapp/components/annotation/SubTagItem.tsx b/webapp/components/annotation/SubTagItem.tsx
index 689ad8a..8a61950 100644
--- a/webapp/components/annotation/SubTagItem.tsx
+++ b/webapp/components/annotation/SubTagItem.tsx
@@ -1,9 +1,10 @@
 import { SubTagInfo, TagInfo } from '../../api';
 import { Container, Row } from 'react-bootstrap';
-import { Button } from 'antd';
-import { useContext } from 'react';
+import { Button, Tooltip } from 'antd';
+import React, { useContext } from 'react';
 import { TagCategoryContext } from '../../contexts/TagCategoryContext';
 import { AnnotationContext } from '../../contexts/AnnotationContext';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 
 /**
  * Creates a single tag item in a tag panel.
@@ -37,6 +38,14 @@ export function SubTagItem(props: { tag: TagInfo; subTag: SubTagInfo }) {
                     disabled={submitting}
                 >
                     {props.subTag.name}
+                    {props.subTag.description && props.subTag.description !== '' && (
+                        <Tooltip
+                            title={props.subTag.description}
+                            key={props.subTag.description}
+                        >
+                            <QuestionCircleOutlined />
+                        </Tooltip>
+                    )}
                 </Button>
             </Row>
         </Container>
diff --git a/webapp/components/annotation/TagItem.tsx b/webapp/components/annotation/TagItem.tsx
index d0118e0..ccb4306 100644
--- a/webapp/components/annotation/TagItem.tsx
+++ b/webapp/components/annotation/TagItem.tsx
@@ -1,7 +1,12 @@
 import { Container, Row, Stack } from 'react-bootstrap';
 import { TagInfo } from '../../api';
-import { Button } from 'antd';
-import { DownOutlined, TagOutlined, UpOutlined } from '@ant-design/icons';
+import { Button, Tooltip } from 'antd';
+import {
+    DownOutlined,
+    QuestionCircleOutlined,
+    TagOutlined,
+    UpOutlined,
+} from '@ant-design/icons';
 import React, { useContext, useState } from 'react';
 import { SubTagItem } from './SubTagItem';
 import { TagCategoryContext } from '../../contexts/TagCategoryContext';
@@ -63,8 +68,16 @@ export function TagItem(props: { tag: TagInfo }) {
                         className="w-100 text-start rounded"
                         disabled={submitting}
                     >
-                        {props.tag.name}
                         <TagOutlined style={{ color: props.tag.color ?? 'black' }} />
+                        {props.tag.name}
+                        {props.tag.description && props.tag.description !== '' && (
+                            <Tooltip
+                                title={props.tag.description}
+                                key={props.tag.description}
+                            >
+                                <QuestionCircleOutlined />
+                            </Tooltip>
+                        )}
                     </Button>
                 )}
                 {!hasSubTags && (
@@ -73,8 +86,16 @@ export function TagItem(props: { tag: TagInfo }) {
                         className="w-100 text-start rounded"
                         disabled={submitting}
                     >
-                        {props.tag.name}
                         <TagOutlined style={{ color: props.tag.color ?? 'black' }} />
+                        {props.tag.name}
+                        {props.tag.description && props.tag.description !== '' && (
+                            <Tooltip
+                                title={props.tag.description}
+                                key={props.tag.description}
+                            >
+                                <QuestionCircleOutlined />
+                            </Tooltip>
+                        )}
                     </Button>
                 )}
             </Row>
