Using react tooltip for timestamp in center channel instead of normal bootstrap

3 files changed, 12 insertions, 9 deletions

diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx
index ac4f57ce2..39c86405c 100644
--- a/web/react/components/channel_loader.jsx
+++ b/web/react/components/channel_loader.jsx
@@ -84,8 +84,6 @@ export default class ChannelLoader extends React.Component {
             });
         });
 
-        $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'});
-
         $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) {
             if (ev.type === 'mouseenter') {
                 $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after');
diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx
index 8ad2336fb..824e7ef39 100644
--- a/web/react/components/post_info.jsx
+++ b/web/react/components/post_info.jsx
@@ -5,6 +5,8 @@ var UserStore = require('../stores/user_store.jsx');
 var utils = require('../utils/utils.jsx');
 
 var Constants = require('../utils/constants.jsx');
+var Tooltip = ReactBootstrap.Tooltip;
+var OverlayTrigger = ReactBootstrap.OverlayTrigger;
 
 export default class PostInfo extends React.Component {
     constructor(props) {
@@ -148,17 +150,19 @@ export default class PostInfo extends React.Component {
 
         var dropdown = this.createDropdown();
 
+        let tooltip = <Tooltip>{utils.displayDate(post.create_at)} at ${utils.displayTime(post.create_at)}</Tooltip>;
+
         return (
             <ul className='post-header post-info'>
                 <li className='post-header-col'>
-                    <time
-                        className='post-profile-time'
-                        data-toggle='tooltip'
-                        title={`${utils.displayDate(post.create_at)} at ${utils.displayTime(post.create_at)}`}
-                        data-placement='top'
+                    <OverlayTrigger
+                        placement='top'
+                        overlay={tooltip}
                     >
-                        {utils.displayDateTime(post.create_at)}
-                    </time>
+                        <time className='post-profile-time'>
+                            {utils.displayDateTime(post.create_at)}
+                        </time>
+                    </OverlayTrigger>
                 </li>
                 <li className='post-header-col post-header__reply'>
                     <div className='dropdown'>
diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx
index 61bf647ca..c5d028d31 100644
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -32,6 +32,7 @@ export default class UserProfile extends React.Component {
     componentDidMount() {
         UserStore.addChangeListener(this.onChange);
         $('#profile_' + this.uniqueId).popover({placement: 'right', container: 'body', trigger: 'hover', html: true, delay: {show: 200, hide: 100}});
+        $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'});
     }
     componentWillUnmount() {
         UserStore.removeChangeListener(this.onChange);