1 files changed, 15 insertions, 16 deletions

diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 6503bd801..b07349df3 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -13,6 +13,8 @@ const Utils = require('../utils/utils.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
+var Popover = ReactBootstrap.Popover;
+var OverlayTrigger = ReactBootstrap.OverlayTrigger;
 
 export default class Navbar extends React.Component {
     constructor(props) {
@@ -36,12 +38,6 @@ export default class Navbar extends React.Component {
         ChannelStore.addChangeListener(this.onChange);
         ChannelStore.addExtraInfoChangeListener(this.onChange);
         $('.inner__wrap').click(this.hideSidebars);
-
-        $('body').on('click.infopopover', function handlePopoverClick(e) {
-            if ($(e.target).attr('data-toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) {
-                $('.info-popover').popover('hide');
-            }
-        });
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onChange);
@@ -224,11 +220,14 @@ export default class Navbar extends React.Component {
             return (
                 <div className='navbar-brand'>
                     <div className='dropdown'>
-                        <div
-                            data-toggle='popover'
-                            data-content={popoverContent}
-                            className='description info-popover'
-                        />
+                        <OverlayTrigger
+                            trigger='click'
+                            placement='bottom'
+                            rootClose='true'
+                            overlay={<Popover>{popoverContent}</Popover>}
+                        >
+                        <div className='description info-popover'/>
+                        </OverlayTrigger>
                         <a
                             href='#'
                             className='dropdown-toggle theme'
@@ -330,7 +329,7 @@ export default class Navbar extends React.Component {
         var isDirect = false;
 
         if (channel) {
-            popoverContent = React.renderToString(
+            popoverContent = (
                 <MessageWrapper
                     message={channel.description}
                     options={{singleline: true, mentionHighlight: false}}
@@ -354,9 +353,9 @@ export default class Navbar extends React.Component {
             }
 
             if (channel.description.length === 0) {
-                popoverContent = React.renderToString(
+                popoverContent = (
                     <div>
-                        No channel description yet. <br/>
+                        {'No channel description yet.'} <br/>
                         <a
                             href='#'
                             data-toggle='modal'
@@ -365,8 +364,8 @@ export default class Navbar extends React.Component {
                             data-channelid={channel.id}
                             data-target='#edit_channel'
                         >
-                            Click here
-                        </a> to add one.</div>
+                            {'Click here'}
+                        </a> {'to add one.'}</div>
                 );
             }
         }