Added hint to user avatar.

templates/index/index.html.twig

@@ -56,8 +56,10 @@
             <td>
                 {% for approve in chix.approves %}
                     {#<div style="align-items: center; display: flex;">#}
+                    <span data-message="{{ approve.user.name }}">
                         <img src="{{ approve.user.avatar }}" width="25px" height="25px" style="padding: 4px"/>
                         {#<div>{{ approve.user.name }}</div>#}
+                    </span>
                     {#</div>#}
                 {% endfor %}
 

templates/main.html.twig

@@ -41,6 +41,52 @@
         .color-red {
             color:brown;
         }
+
+        [data-message] {
+            position: relative;
+        }
+
+        [data-message]:hover:after {
+            opacity: 1;
+            transition: all .3s ease;
+            bottom: 25px;
+            left: 0;
+        }
+
+        [data-message]:after {
+            content: attr(data-message);
+            position: absolute;
+            left: 0;
+            bottom: 20px;
+            font-size: .8em;
+            opacity: 0;
+            padding: 5px 10px;
+            background: rgba(0,0,0, .8);
+            border-radius: 5px;
+            transition: all .3s ease;
+            white-space: nowrap;
+            color: #fff;
+        }
+
+        [data-message]:before {
+            height: 0;
+            width: 0;
+            content: '';
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid rgba(0,0,0, .8);
+            position: absolute;
+            left: 5px;
+            opacity: 0;
+            bottom: 15px;
+            transition: all .3s ease;
+        }
+
+        [data-message]:hover:before {
+            opacity: 1;
+            bottom: 20px;
+            transition: all .3s ease;
+        }
     </style>
 {% endblock %}