Adding tippy to active users badges. Fixes #150

diff --git a/src/shared/components/main.tsx b/src/shared/components/main.tsx
index b83d671298ff3696130dc500ae87fbeb5a1e6e32..a99aa5e6a9c8f05407619499d65a470e09c69284 100644 (file)
--- a/src/shared/components/main.tsx
+++ b/src/shared/components/main.tsx
@@ -426,25 +426,47 @@ export class Main extends Component<any, MainState> {
         <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_online', { count: this.state.siteRes.online })}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_day,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('day')}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_day,
           })}{' '}
           / {i18n.t('day')}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_week,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('week')}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_week,
           })}{' '}
           / {i18n.t('week')}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_month,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('month')}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_month,
           })}{' '}
           / {i18n.t('month')}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_half_year,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('number_of_months', {
+            count: 6,
+          })}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_half_year,
           })}{' '}

diff --git a/src/shared/components/sidebar.tsx b/src/shared/components/sidebar.tsx
index 324f3eaa681b2acee8531e5f06c6690c7f717949..03675ddf6a56d4d4756d33899b1fbe98291fefd8 100644 (file)
--- a/src/shared/components/sidebar.tsx
+++ b/src/shared/components/sidebar.tsx
@@ -149,25 +149,47 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_online', { count: this.props.online })}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_day,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('day')}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_day,
           })}{' '}
           / {i18n.t('day')}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_week,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('week')}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_week,
           })}{' '}
           / {i18n.t('week')}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_month,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('month')}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_month,
           })}{' '}
           / {i18n.t('month')}
         </li>
-        <li className="list-inline-item badge badge-secondary">
+        <li
+          className="list-inline-item badge badge-secondary pointer"
+          data-tippy-content={`${i18n.t('number_of_users', {
+            count: counts.users_active_half_year,
+          })} ${i18n.t('active_in_the_last')} ${i18n.t('number_of_months', {
+            count: 6,
+          })}`}
+        >
           {i18n.t('number_of_users', {
             count: counts.users_active_half_year,
           })}{' '}