diff --git a/src/short-urls/helpers/ShortUrlVisitsCount.js b/src/short-urls/helpers/ShortUrlVisitsCount.js
index b058868d..e33ae1c0 100644
--- a/src/short-urls/helpers/ShortUrlVisitsCount.js
+++ b/src/short-urls/helpers/ShortUrlVisitsCount.js
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
import { UncontrolledTooltip } from 'reactstrap';
import classNames from 'classnames';
import { serverType } from '../../servers/prop-types';
+import { prettify } from '../../utils/helpers/numbers';
import { shortUrlType } from '../reducers/shortUrlsList';
import VisitStatsLink from './VisitStatsLink';
import './ShortUrlVisitsCount.scss';
@@ -23,7 +24,7 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f
- {visitsCount}
+ {prettify(visitsCount)}
);
@@ -32,19 +33,27 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f
return visitsLink;
}
+ const prettifiedMaxVisits = prettify(maxVisits);
+ const tooltipRef = useRef();
+
return (
{visitsLink}
-
- {' '}/ {maxVisits}{' '}
+ {
+ tooltipRef.current = el;
+ }}
+ >
+ {' '}/ {prettifiedMaxVisits}{' '}
-
- This short URL will not accept more than {maxVisits} visits.
+ tooltipRef.current} placement="bottom">
+ This short URL will not accept more than {prettifiedMaxVisits} visits.
);