1 files changed, 45 insertions, 29 deletions

diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 6503bd801..f9cd525fd 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -14,6 +14,9 @@ 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) {
         super(props);
@@ -36,12 +39,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 +221,15 @@ 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'
+                            overlay={popoverContent}
+                            className='description'
+                            rootClose={true}
+                        >
+                            <div className='description info-popover'/>
+                        </OverlayTrigger>
                         <a
                             href='#'
                             className='dropdown-toggle theme'
@@ -330,11 +331,17 @@ export default class Navbar extends React.Component {
         var isDirect = false;
 
         if (channel) {
-            popoverContent = React.renderToString(
-                <MessageWrapper
-                    message={channel.description}
-                    options={{singleline: true, mentionHighlight: false}}
-                />
+            popoverContent = (
+                <Popover
+                    bsStyle='info'
+                    placement='bottom'
+                    id='description-popover'
+                >
+                    <MessageWrapper
+                        message={channel.description}
+                        options={{singleline: true, mentionHighlight: false}}
+                    />
+                </Popover>
             );
             isAdmin = Utils.isAdmin(this.state.member.roles);
 
@@ -354,19 +361,28 @@ export default class Navbar extends React.Component {
             }
 
             if (channel.description.length === 0) {
-                popoverContent = React.renderToString(
-                    <div>
-                        No channel description yet. <br/>
-                        <a
-                            href='#'
-                            data-toggle='modal'
-                            data-desc={channel.description}
-                            data-title={channel.display_name}
-                            data-channelid={channel.id}
-                            data-target='#edit_channel'
-                        >
-                            Click here
-                        </a> to add one.</div>
+                popoverContent = (
+                    <Popover
+                        bsStyle='info'
+                        placement='bottom'
+                        id='description-popover'
+                    >
+                        <div>
+                            {'No channel description yet.'}
+                            <br/>
+                            <a
+                                href='#'
+                                data-toggle='modal'
+                                data-desc={channel.description}
+                                data-title={channel.display_name}
+                                data-channelid={channel.id}
+                                data-target='#edit_channel'
+                            >
+                                {'Click here'}
+                            </a>
+                            {' to add one.'}
+                        </div>
+                    </Popover>
                 );
             }
         }