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

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');

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'>

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);

web/templates/channel.html

@@ -53,6 +53,7 @@
   <div id="register_app_modal"></div>
 <script>
   window.setup_channel_page({{ .Props }});
+  $('body').tooltip( {selector: '[data-toggle=tooltip]'} );
   $('.modal-body').css('max-height', $(window).height() * 0.7);
   $('.modal-body').perfectScrollbar();
 </script>