feat(gui): tips over some buttons

src/app/app.css

@@ -39,3 +39,39 @@
 .header.sticky .search-panel {
   margin-bottom: 0px;
 }
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 8px 6px;
+  position: absolute;
+  z-index: 3;
+  top: 150%;
+  left: 50%;
+  margin-left: -60px;
+  font-size: 0.9em;
+}
+
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent black transparent;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}

src/app/header.js

@@ -3,6 +3,7 @@ import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'mat
 import Background from './images/pirate-mod.jpg'
 import RaisedButton from 'material-ui/RaisedButton';
 import Search from './search'
+import Tooltip from './tooltip'
 
 class Header extends React.Component {
 	constructor(props)
@@ -56,6 +57,7 @@ class Header extends React.Component {
 						overlay={<CardTitle className='header-title' title={__('Yarrr, Landlubbers!')} style={{paddingTop: 2}} subtitle={
 							<div>
 								<div className='row' style={{position: 'absolute', top: -65}}>
+									<Tooltip hint={__('main settings')}>
 										<svg className='clickable'
 											onClick={() => {
 												window.router('/config')
@@ -95,6 +97,8 @@ class Header extends React.Component {
                   C302.1,704.538,332,675.438,368.3,675.837z"/>
 											</g>
 										</svg>
+									</Tooltip>
+									<Tooltip hint={__('filters settings')}>
 										<svg className='clickable'
 											onClick={() => {
 												window.router('/filters')
@@ -149,6 +153,7 @@ class Header extends React.Component {
 												</g>
 											</g>
 										</svg>
+									</Tooltip>
 								</div>
 
 								{__('Welcome to')} ROTB! {__('This is file search engine based on the torrents from the internet')}. 

src/app/search.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 import AdvancedSearch from './search-advanced-controls'
 import TorrentsStatistic from './torrent-statistic'
+import Tooltip from './tooltip'
 
 import TextField from 'material-ui/TextField';
 import RaisedButton from 'material-ui/RaisedButton';
@@ -261,6 +262,7 @@ class Search extends Component {
 						((this.searchTorrents && this.searchTorrents.length > 0) || (this.searchFiles && this.searchFiles.length > 0))
                         &&
                         <div style={{width: 25, height: 25, margin: 2, marginRight: 8}}>
+                        	<Tooltip hint={__('display search results for current search request')}>
                         		<Checkbox
                         			checked={false}
                         			uncheckedIcon={<svg viewBox="0 0 459 459">
@@ -276,6 +278,7 @@ class Search extends Component {
                         			}}
                         			style={{paddingTop: '0.6em', paddingLeft: '0.2em'}}
                         		/>
+                        	</Tooltip>
                         </div>
 					}
 					<TextField
@@ -302,6 +305,7 @@ class Search extends Component {
 					/>
 
 					<div style={{width: 25, height: 25, margin: 2}}>
+						<Tooltip hint={__('enable/disable safe search (adult filter)')}>
 							<Checkbox
 								ref='safeSearch'
 								checked={this.notSafeSearch ? true : false}
@@ -313,8 +317,10 @@ class Search extends Component {
 								}}
 								style={{paddingBottom: '0.8em'}}
 							/>
+						</Tooltip>
 					</div>
 					<div style={{width: 25, height: 25, margin: 2}}>
+						<Tooltip hint={__('advanced search')}>
 							<Checkbox
 								ref='advancedSearch'
 								checked={this.state.advancedSearch}
@@ -326,6 +332,7 @@ class Search extends Component {
 								}}
 								style={{paddingBottom: '0.8em'}}
 							/>
+						</Tooltip>
 					</div>
 
 					<RaisedButton style={{marginLeft: '10px'}} label={__('Search')} primary={true} onClick={() =>{

src/app/tooltip.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default (props) => {
+	return (
+		<div className='tooltip'>
+			{props.children}
+			<span class="tooltiptext">{props.hint}</span>
+		</div>
+	)
+}

translations/en.json

@@ -164,6 +164,11 @@
         "downloading": "downloading",
         "Cancel download": "Cancel download",
         "Back to previus": "Back to previus",
-        "Processing files": "Processing files"
+        "Processing files": "Processing files",
+        "main settings": "main settings",
+        "filters settings": "filters settings",
+        "enable/disable safe search (adult filter)": "enable/disable safe search (adult filter)",
+        "advanced search": "advanced search",
+        "display search results for current search request": "display search results for current search request"
     }
 }

translations/ru.json

@@ -164,6 +164,11 @@
         "downloading": "скачивается",
         "Cancel download": "Отвенить закачку",
         "Back to previus": "Вернуться на предыдущую",
-        "Processing files": "Обработка файлов"
+        "Processing files": "Обработка файлов",
+        "main settings": "главные настройки",
+        "filters settings": "настройки фильтров",
+        "enable/disable safe search (adult filter)": "включить/выключить безопасный поиск (фильтр для взрослых)",
+        "advanced search": "расширенный поиск",
+        "display search results for current search request": "отобразить поисковые результаты для текущего поиского запроса"
     }
 }

translations/ua.json

@@ -164,6 +164,11 @@
         "downloading": "downloading",
         "Cancel download": "Cancel download",
         "Back to previus": "Back to previus",
-        "Processing files": "Processing files"
+        "Processing files": "Processing files",
+        "main settings": "main settings",
+        "filters settings": "filters settings",
+        "enable/disable safe search (adult filter)": "enable/disable safe search (adult filter)",
+        "advanced search": "advanced search",
+        "display search results for current search request": "display search results for current search request"
     }
 }