import React, { Component } from 'react'

import './Header.css'

import logo from './logo.svg'

class Header extends Component {
  render() {
    return (
      <div className="Header uk-background-primary uk-light">
        <div className="uk-grid uk-flex-center">
          <div className="uk-width-1-2@l">
            <nav className="uk-navbar ">
              <div className="uk-navbar-item re-navbar-item">
                <a href="/" className="uk-logo">
                  <img src={logo} alt="logo" className="re-logo"/>
                </a>
              </div>
              <div className="uk-navbar-item re-navbar-item uk-width-expand">
                <input type="text" className="uk-input" placeholder="Quick search" />
              </div>
              <div className="uk-navbar-item re-navbar-item uk-navbar-right">
                <ul className="uk-iconnav">
                  <li><a href="#" className="uk-button" data-uk-icon="icon: plus" /></li>
                  <li><a href="#" className="uk-button" data-uk-icon="icon: cog" /></li>
                  <li><a href="#" className="uk-button" data-uk-icon="icon: sign-out" /></li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
    )
  }
}

export default Header

@@ -951,16 +951,55 @@
 n: plus%22
+ title=%22Add a reminder%22 data-uk-tooltip
  /%3E%3C/li%3E
@@ -1079,16 +1079,49 @@
 on: cog%22
+ title=%22Settings%22 data-uk-tooltip
  /%3E%3C/li%3E
@@ -1206,16 +1206,49 @@
 ign-out%22
+ title=%22Sign out%22 data-uk-tooltip
  /%3E%3C/li%3E

Add navbar tooltips