[org admin] 'info' page: added an 'over traffic' tip for the 'Traffic this month' module (#8006)

frontend/src/css/org-admin-info-page.css

@@ -48,3 +48,13 @@
   font-size: .8125rem;
   color: #666666;
 }
+
+#traffic-over-tip-icon {
+  color: #bdbdbd;
+  font-size: .875rem;
+  margin-left: 6px;
+}
+
+#traffic-over-tip-icon:hover {
+  color: #999999;
+}

frontend/src/pages/org-admin/org-info.js

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { UncontrolledTooltip } from 'reactstrap';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { mediaUrl, gettext, orgMemberQuotaEnabled, enableSeafileAI } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -109,7 +110,16 @@ class OrgInfo extends Component {
                   )}
                 </div>
                 <div className="info-content-item">
-                  <h4 className="info-content-item-heading">{gettext('Traffic this month')}</h4>
+                  <h4 className="info-content-item-heading">
+                    {gettext('Traffic this month')}
+                    <i className="sf3-font-help sf3-font" id="traffic-over-tip-icon"></i>
+                    <UncontrolledTooltip
+                      placement="right"
+                      target={'#traffic-over-tip-icon'}
+                    >
+                      {gettext('After exceeding the traffic limit, the file download speed will be restricted.')}
+                    </UncontrolledTooltip>
+                  </h4>
                   {traffic_limit > 0 ? (
                     <>
                       <p className="info-content-space-text">{`${(download_traffic / traffic_limit * 100).toFixed(2)}%`}</p>