From bb24a71f3c3be50a172d98badb0ba5c1eb6869eb Mon Sep 17 00:00:00 2001
From: nuxsmin <nuxsmin@syspass.org>
Date: Mon, 21 Nov 2016 16:01:47 +0100
Subject: [PATCH] * [DEV] UI tweaks

---
 .../views/accountsearch/header.inc            |  6 ++-
 .../views/accountsearch/rows.inc              | 48 +++++++++++++------
 .../views/accountsearch/searchbox.inc         | 26 ++++++----
 .../views/grid/datagrid-nav-full.inc          | 31 ++++++++----
 .../views/grid/datagrid-rows.inc              |  7 ++-
 .../views/grid/datatabs-grid.inc              | 25 ++++++----
 .../material-blue/views/main/footer.inc       | 38 ++++++++++-----
 inc/themes/material-blue/views/main/login.inc | 16 -------
 inc/themes/material-blue/views/main/menu.inc  |  5 +-
 .../material-blue/views/main/update.inc       | 19 ++++----
 10 files changed, 140 insertions(+), 81 deletions(-)

diff --git a/inc/themes/material-blue/views/accountsearch/header.inc b/inc/themes/material-blue/views/accountsearch/header.inc
index 75336325..fff4248f 100644
--- a/inc/themes/material-blue/views/accountsearch/header.inc
+++ b/inc/themes/material-blue/views/accountsearch/header.inc
@@ -9,10 +9,12 @@
     <ul>
         <?php foreach ($data->getHeader()->getSortFields() as $field): ?>
             <li>
-                <a class="round <?php echo ($data->getPager()->getSortKey() == $field->getSortKey()) ? 'filterOn' : ''; ?>"
-                   title="<?php echo $field->getTitle(); ?>">
+                <a id="btn-order-<?php echo $field->getSortKey(); ?>"
+                   class="round <?php echo ($data->getPager()->getSortKey() == $field->getSortKey()) ? 'filterOn' : ''; ?>">
                     <?php echo $field->getName(); ?>
                 </a>
+                <span for="btn-order-<?php echo $field->getSortKey(); ?>"
+                      class="mdl-tooltip mdl-tooltip--bottom"><?php echo $field->getTitle(); ?></span>
                 <?php
                 $classDown = ($data->getPager()->getSortKey() == $field->getSortKey() && $data->getPager()->getSortOrder() === 0) ? 'mdl-color--amber-A200' : 'md-dark md-inactive';
                 $classUp = ($data->getPager()->getSortKey() == $field->getSortKey() && $data->getPager()->getSortOrder() === 1) ? 'mdl-color--amber-A200' : 'md-dark md-inactive';
diff --git a/inc/themes/material-blue/views/accountsearch/rows.inc b/inc/themes/material-blue/views/accountsearch/rows.inc
index 31e34d39..fbb731a7 100644
--- a/inc/themes/material-blue/views/accountsearch/rows.inc
+++ b/inc/themes/material-blue/views/accountsearch/rows.inc
@@ -26,7 +26,8 @@
                         <span style="background-color: <?php echo $AccountSearchItem->getColor(); ?>;"
                               class="mdl-chip__contact mdl-color-text--white">
                             <?php echo strtoupper($AccountSearchData->getCustomerName()[0]); ?></span>
-                        <span class="mdl-chip__text" title="<?php echo $AccountSearchData->getCustomerName(); ?>"><?php echo $AccountSearchItem->getShortCustomerName(); ?></span>
+                        <span class="mdl-chip__text"
+                              title="<?php echo $AccountSearchData->getCustomerName(); ?>"><?php echo $AccountSearchItem->getShortCustomerName(); ?></span>
                     </span>
                             </a>
                         <?php else: ?>
@@ -34,7 +35,8 @@
                         <span style="background-color: <?php echo $AccountSearchItem->getColor(); ?>;"
                               class="mdl-chip__contact mdl-color-text--white">
                             <?php echo strtoupper($AccountSearchData->getCustomerName()[0]); ?></span>
-                        <span class="mdl-chip__text" title="<?php echo $AccountSearchData->getCustomerName(); ?>"><?php echo $AccountSearchItem->getShortCustomerName(); ?></span>
+                        <span class="mdl-chip__text"
+                              title="<?php echo $AccountSearchData->getCustomerName(); ?>"><?php echo $AccountSearchItem->getShortCustomerName(); ?></span>
                     </span>
                         <?php endif; ?>
                     </div>
@@ -87,40 +89,55 @@
                 <?php if ($AccountSearchItem->isShow()): ?>
                     <div class="account-info">
                         <?php if ($AccountSearchItem->isPasswordExpired()): ?>
-                            <i class="material-icons <?php echo $icons->getIconWarning()->getClass(); ?>"
-                               title="<?php echo _('Clave Caducada'); ?>"><?php echo $icons->getIconWarning()->getIcon(); ?></i>
+                            <i id="icon-expired-<?php echo $AccountSearchData->getAccountId(); ?>"
+                               class="material-icons <?php echo $icons->getIconWarning()->getClass(); ?>">
+                                <?php echo $icons->getIconWarning()->getIcon(); ?></i>
+                            <span
+                                for="icon-expired-<?php echo $AccountSearchData->getAccountId(); ?>"
+                                class="mdl-tooltip mdl-tooltip--top"><?php echo _('Clave Caducada'); ?></span>
                         <?php endif; ?>
 
                         <?php if ($AccountSearchData->getAccountIsPrivate() === 0): ?>
                             <i id="accesses-<?php echo $AccountSearchData->getAccountId(); ?>"
                                class="material-icons">face</i>
 
-                            <div class="mdl-tooltip" for="accesses-<?php echo $AccountSearchData->getAccountId(); ?>">
+                            <div class="mdl-tooltip mdl-tooltip--top"
+                                 for="accesses-<?php echo $AccountSearchData->getAccountId(); ?>">
                                 <?php echo _('Permisos'), '<br>', $AccountSearchItem->getAccesses(); ?>
                             </div>
                         <?php else: ?>
-                            <i class="material-icons" title="<?php echo _('Cuenta Privada'); ?>">lock</i>
+                            <i id="icon-private-<?php echo $AccountSearchData->getAccountId(); ?>"
+                               class="material-icons">lock</i>
+                            <span
+                                for="icon-private-<?php echo $AccountSearchData->getAccountId(); ?>"
+                                class="mdl-tooltip mdl-tooltip--top"><?php echo _('Cuenta Privada'); ?></span>
                         <?php endif; ?>
 
                         <?php if ($AccountSearchItem->isFavorite()): ?>
-                            <i class="material-icons icon-favorite mdl-color-text--amber-A100"
-                               title="<?php echo _('Eliminar Favorito'); ?>"
+                            <i id="btn-favorite-<?php echo $AccountSearchData->getAccountId(); ?>"
+                               class="material-icons icon-favorite mdl-color-text--amber-A100"
                                data-action-id-on="<?php echo \SP\Core\ActionsInterface::ACTION_ACC_FAVORITES_ADD; ?>"
                                data-action-id-off="<?php echo \SP\Core\ActionsInterface::ACTION_ACC_FAVORITES_DELETE; ?>"
                                data-item-id="<?php echo $AccountSearchData->getAccountId(); ?>"
                                data-status="<?php echo 'on'; ?>">star</i>
+                            <span
+                                for="btn-favorite-<?php echo $AccountSearchData->getAccountId(); ?>"
+                                class="mdl-tooltip mdl-tooltip--top"><?php echo _('Eliminar Favorito'); ?></span>
                         <?php else: ?>
-                            <i class="material-icons icon-favorite"
-                               title="<?php echo _('Marcar Favorito'); ?>"
+                            <i id="btn-favorite-<?php echo $AccountSearchData->getAccountId(); ?>"
+                               class="material-icons icon-favorite"
                                data-action-id-on="<?php echo \SP\Core\ActionsInterface::ACTION_ACC_FAVORITES_ADD; ?>"
                                data-action-id-off="<?php echo \SP\Core\ActionsInterface::ACTION_ACC_FAVORITES_DELETE; ?>"
                                data-item-id="<?php echo $AccountSearchData->getAccountId(); ?>"
                                data-status="<?php echo 'off'; ?>">star_border</i>
+                            <span
+                                for="btn-favorite-<?php echo $AccountSearchData->getAccountId(); ?>"
+                                class="mdl-tooltip mdl-tooltip--top"><?php echo _('Marcar Favorito'); ?></span>
                         <?php endif; ?>
 
                         <?php if ($AccountSearchData->getAccountNotes() !== ''): ?>
                             <i id="notes-<?php echo $AccountSearchData->getAccountId(); ?>" class="material-icons">speaker_notes</i>
-                            <div class="mdl-tooltip" for="notes-<?php echo $AccountSearchData->getAccountId(); ?>">
+                            <div class="mdl-tooltip mdl-tooltip--top" for="notes-<?php echo $AccountSearchData->getAccountId(); ?>">
                                 <?php echo _('Notas'), '<br>', $AccountSearchItem->getShortNotes(); ?>
                             </div>
                         <?php endif; ?>
@@ -128,7 +145,7 @@
                         <?php if ($AccountSearchItem->getNumFiles() > 0): ?>
                             <i id="attachments-<?php echo $AccountSearchData->getAccountId(); ?>"
                                class="material-icons">attach_file</i>
-                            <div class="mdl-tooltip"
+                            <div class="mdl-tooltip mdl-tooltip--top"
                                  for="attachments-<?php echo $AccountSearchData->getAccountId(); ?>">
                                 <?php echo _('Archivos adjuntos'), ': ', $AccountSearchItem->getNumFiles(); ?>
                             </div>
@@ -163,12 +180,15 @@
                     <div class="account-actions">
                         <?php foreach ($data->getDataActions() as $action): ?>
                             <?php if ($action->getReflectionFilter()->invoke($AccountSearchItem)): ?>
-                                <i class="btn-action material-icons <?php echo $action->getIcon()->getClass(); ?>"
-                                   title="<?php echo $action->getTitle(); ?>"
+                                <i id="btn-action-<?php echo $AccountSearchData->getAccountId(), '-', $action->getIcon()->getIcon(); ?>"
+                                   class="btn-action material-icons <?php echo $action->getIcon()->getClass(); ?>"
                                    data-item-id="<?php echo $AccountSearchData->getAccountId(); ?>"
                                     <?php foreach ($action->getData() as $name => $actionData): ?>
                                         <?php echo 'data-', $name, '=', '"', $actionData, '"'; ?>
                                     <?php endforeach; ?>><?php echo $action->getIcon()->getIcon(); ?></i>
+                                <span
+                                    for="btn-action-<?php echo $AccountSearchData->getAccountId(), '-', $action->getIcon()->getIcon(); ?>"
+                                    class="mdl-tooltip mdl-tooltip--bottom"><?php echo $action->getTitle(); ?></span>
                             <?php endif; ?>
                         <?php endforeach; ?>
 
diff --git a/inc/themes/material-blue/views/accountsearch/searchbox.inc b/inc/themes/material-blue/views/accountsearch/searchbox.inc
index 7222eb8d..1f2f7ee9 100644
--- a/inc/themes/material-blue/views/accountsearch/searchbox.inc
+++ b/inc/themes/material-blue/views/accountsearch/searchbox.inc
@@ -62,33 +62,41 @@
             </select>
 
             <div class="filter-buttons">
-                <button type="button"
+                <button type="button" id="btn-favorite"
                         class="icon-searchfav mdl-button mdl-js-button mdl-button--icon" tabindex="5">
                     <i class="material-icons <?php echo ($searchFavorites === true) ? 'mdl-color-text--amber-A200' : ''; ?>"
                        title="<?php echo ($searchFavorites === true) ? _('Mostrar Todos') : _('Mostrar Favoritos'); ?>">star</i>
                 </button>
-                <button type="reset"
-                        class="btn-clear mdl-button mdl-js-button mdl-button--icon"
-                        title="<?php echo $icons->getIconClear()->getTitle(); ?>" tabindex="6">
+                <span for="btn-favorite"
+                      class="mdl-tooltip mdl-tooltip--bottom"><?php echo _('Filtrar Favoritos'); ?></span>
+
+                <button type="reset" id="btn-reset"
+                        class="btn-clear mdl-button mdl-js-button mdl-button--icon" tabindex="6">
                     <i class="material-icons"><?php echo $icons->getIconClear()->getIcon(); ?></i>
                 </button>
+                <span for="btn-reset"
+                      class="mdl-tooltip mdl-tooltip--bottom"><?php echo $icons->getIconClear()->getTitle(); ?></span>
             </div>
             <div class="filter-buttons filter-slider">
                 <span id="txt-slider"></span>
                 <input id="rpp" name="rpp" class="mdl-slider mdl-js-slider" type="range"
-                       title="<?php echo _('Cuentas por página'); ?>"
                        min="3" step="3" value="<?php echo $data->getPager()->getLimitCount(); ?>" tabindex="7"/>
+                <span for="rpp"
+                      class="mdl-tooltip mdl-tooltip--bottom"><?php echo _('Cuentas por página'); ?></span>
             </div>
-            <i class="material-icons show-filter" data-state="0" data-icon-down="<?php echo $icons->getIconDown()->getIcon(); ?>"
-               data-icon-up="<?php echo $icons->getIconUp()->getIcon(); ?>"
-               title="<?php echo _('Más Filtros'); ?>"><?php echo $icons->getIconDown()->getIcon(); ?></i>
+            <i id="btn-filters" class="material-icons show-filter" data-state="0"
+               data-icon-down="<?php echo $icons->getIconDown()->getIcon(); ?>"
+               data-icon-up="<?php echo $icons->getIconUp()->getIcon(); ?>"><?php echo $icons->getIconDown()->getIcon(); ?></i>
+            <span for="btn-filters"
+                  class="mdl-tooltip mdl-tooltip--bottom"><?php echo _('Más Filtros'); ?></span>
         </div>
 
         <div class="search-filters-tags">
             <select id="tags" name="tags[]" class="select-box" multiple tabindex="8">
                 <option value=""><?php echo _('Seleccionar Etiqueta'); ?></option>
                 <?php foreach ($tags as $tag): ?>
-                    <option value="<?php echo $tag->id; ?>" <?php echo in_array($tag->id, $searchTags) ? 'selected' : ''; ?>><?php echo $tag->name; ?></option>
+                    <option
+                        value="<?php echo $tag->id; ?>" <?php echo in_array($tag->id, $searchTags) ? 'selected' : ''; ?>><?php echo $tag->name; ?></option>
                 <?php endforeach; ?>
             </select>
         </div>
diff --git a/inc/themes/material-blue/views/grid/datagrid-nav-full.inc b/inc/themes/material-blue/views/grid/datagrid-nav-full.inc
index 866e6a41..a5c42714 100644
--- a/inc/themes/material-blue/views/grid/datagrid-nav-full.inc
+++ b/inc/themes/material-blue/views/grid/datagrid-nav-full.inc
@@ -13,39 +13,54 @@
     </div>
     <div class="pager-right">
         <?php if ($data->getPager()->getLimitStart() > 1): ?>
-            <i class="btn-action-pager material-icons <?php echo $data->getPager()->getIconFirst()->getClass(); ?>"
-               title="<?php echo $data->getPager()->getIconFirst()->getTitle(); ?>"
+            <i id="btn-pager-first"
+                class="btn-action-pager material-icons <?php echo $data->getPager()->getIconFirst()->getClass(); ?>"
                data-action-id="<?php echo $data->getPager()->getSourceAction()->getId(); ?>"
                data-action-form="<?php echo $data->getPager()->getSourceAction()->getName(); ?>"
                data-start="<?php echo $data->getPager()->getFirst(); ?>"
                data-count="<?php echo $data->getPager()->getLimitCount(); ?>"
                data-onclick="<?php echo $data->getPager()->getOnClick(); ?>"><?php echo $data->getPager()->getIconFirst()->getIcon(); ?></i>
-            <i class="btn-action-pager material-icons <?php echo $data->getPager()->getIconPrev()->getClass(); ?>"
-               title="<?php echo $data->getPager()->getIconPrev()->getTitle(); ?>"
+            <span
+                for="btn-pager-first"
+                class="mdl-tooltip mdl-tooltip--top"><?php echo $data->getPager()->getIconFirst()->getTitle(); ?></span>
+
+            <i id="btn-pager-prev"
+               class="btn-action-pager material-icons <?php echo $data->getPager()->getIconPrev()->getClass(); ?>"
                data-action-id="<?php echo $data->getPager()->getSourceAction()->getId(); ?>"
                data-action-form="<?php echo $data->getPager()->getSourceAction()->getName(); ?>"
                data-start="<?php echo $data->getPager()->getPrev(); ?>"
                data-count="<?php echo $data->getPager()->getLimitCount(); ?>"
                data-onclick="<?php echo $data->getPager()->getOnClick(); ?>"><?php echo $data->getPager()->getIconPrev()->getIcon(); ?></i>
+
+            <span
+                for="btn-pager-prev"
+                class="mdl-tooltip mdl-tooltip--top"><?php echo $data->getPager()->getIconPrev()->getTitle(); ?></span>
         <?php endif; ?>
         &nbsp;
         <?php echo $data->getPager()->getFirstPage(), '/', $data->getPager()->getLastPage(); ?>
         &nbsp;
         <?php if ($data->getPager()->getLimitStart() < $data->getPager()->getTotalRows() && $data->getPager()->getFirstPage() != $data->getPager()->getLastPage()): ?>
-            <i class="btn-action-pager material-icons <?php echo $data->getPager()->getIconNext()->getClass(); ?>"
-               title="<?php echo $data->getPager()->getIconNext()->getTitle(); ?>"
+            <i id="btn-pager-next"
+               class="btn-action-pager material-icons <?php echo $data->getPager()->getIconNext()->getClass(); ?>"
                data-action-id="<?php echo $data->getPager()->getSourceAction()->getId(); ?>"
                data-action-form="<?php echo $data->getPager()->getSourceAction()->getName(); ?>"
                data-start="<?php echo $data->getPager()->getNext(); ?>"
                data-count="<?php echo $data->getPager()->getLimitCount(); ?>"
                data-onclick="<?php echo $data->getPager()->getOnClick(); ?>"><?php echo $data->getPager()->getIconNext()->getIcon(); ?></i>
-            <i class="btn-action-pager material-icons <?php echo $data->getPager()->getIconLast()->getClass(); ?>"
-               title="<?php echo $data->getPager()->getIconLast()->getTitle(); ?>"
+
+            <span
+                for="btn-pager-next"
+                class="mdl-tooltip mdl-tooltip--top"><?php echo $data->getPager()->getIconNext()->getTitle(); ?></span>
+            <i id="btn-pager-last"
+               class="btn-action-pager material-icons <?php echo $data->getPager()->getIconLast()->getClass(); ?>"
                data-action-id="<?php echo $data->getPager()->getSourceAction()->getId(); ?>"
                data-action-form="<?php echo $data->getPager()->getSourceAction()->getName(); ?>"
                data-start="<?php echo $data->getPager()->getLast(); ?>"
                data-count="<?php echo $data->getPager()->getLimitCount(); ?>"
                data-onclick="<?php echo $data->getPager()->getOnClick(); ?>"><?php echo $data->getPager()->getIconLast()->getIcon(); ?></i>
+            <span
+                for="btn-pager-last"
+                class="mdl-tooltip mdl-tooltip--top"><?php echo $data->getPager()->getIconLast()->getTitle(); ?></span>
         <?php endif; ?>
     </div>
 </div>
\ No newline at end of file
diff --git a/inc/themes/material-blue/views/grid/datagrid-rows.inc b/inc/themes/material-blue/views/grid/datagrid-rows.inc
index 2eeb82d1..26c97c08 100644
--- a/inc/themes/material-blue/views/grid/datagrid-rows.inc
+++ b/inc/themes/material-blue/views/grid/datagrid-rows.inc
@@ -41,13 +41,16 @@
                         <?php foreach ($data->getDataActions() as $action): ?>
                             <?php if (!$action->isSkip()): ?>
                                 <?php if ($action->getFilterRowSource() && $dataItem->{$action->getFilterRowSource()} == 1): continue; endif; ?>
-                                <i class="btn-action material-icons <?php echo $action->getIcon()->getClass(); ?>"
-                                   title="<?php echo $action->getTitle(); ?>"
+                                <i id="btn-action-<?php echo $dataItem->{$data->getData()->getDataRowSourceId()}, '-', $action->getId(); ?>"
+                                   class="btn-action material-icons <?php echo $action->getIcon()->getClass(); ?>"
                                    data-action-id="<?php echo $action->getId(); ?>"
                                    data-nextaction-id="<?php echo $actionId; ?>"
                                    data-item-id="<?php echo $dataItem->{$data->getData()->getDataRowSourceId()}; ?>"
                                    data-activetab="<?php echo $index; ?>"
                                    data-onclick="<?php echo $action->getOnClick(); ?>"><?php echo $action->getIcon()->getIcon(); ?></i>
+                                <span
+                                    for="btn-action-<?php echo $dataItem->{$data->getData()->getDataRowSourceId()}, '-', $action->getId(); ?>"
+                                    class="mdl-tooltip mdl-tooltip--top"><?php echo $action->getTitle(); ?></span>
                             <?php endif; ?>
                         <?php endforeach; ?>
                     <?php else: ?>
diff --git a/inc/themes/material-blue/views/grid/datatabs-grid.inc b/inc/themes/material-blue/views/grid/datatabs-grid.inc
index 848422bf..8f6b2b96 100644
--- a/inc/themes/material-blue/views/grid/datatabs-grid.inc
+++ b/inc/themes/material-blue/views/grid/datatabs-grid.inc
@@ -19,15 +19,17 @@
                         <?php if ($action->getType() === \SP\Html\DataGrid\DataGridActionType::NEW_ITEM): ?>
                             <li>
                                 <button
+                                    id="btn-add-<?php echo $action->getId(); ?>"
                                     class="btn-action mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored mdl-color--indigo-A200 mdl-js-ripple-effect"
                                     data-action-id="<?php echo $action->getId(); ?>"
                                     data-item-id="0"
                                     data-activetab="<?php echo $index; ?>"
                                     data-nextaction-id="<?php echo $data->getOnCloseAction(); ?>"
-                                    data-onclick="<?php echo $action->getOnClick(); ?>"
-                                    title="<?php echo $action->getTitle(); ?>">
+                                    data-onclick="<?php echo $action->getOnClick(); ?>">
                                     <i class="material-icons"><?php echo $action->getIcon()->getIcon(); ?></i>
                                 </button>
+                                <span for="btn-add-<?php echo $action->getId(); ?>"
+                                      class="mdl-tooltip mdl-tooltip--bottom"><?php echo $action->getTitle(); ?></span>
                             </li>
                         <?php elseif ($action->getType() === \SP\Html\DataGrid\DataGridActionType::SEARCH_ITEM): ?>
                             <li class="datagrid-action-search" style="width: auto;">
@@ -39,11 +41,13 @@
                                       data-onsubmit="<?php echo $action->getOnSubmit(); ?>">
 
                                     <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
-                                        <label class="mdl-button mdl-js-button mdl-button--icon"
-                                               for="search-<?php echo $index; ?>"
-                                               title="<?php echo $action->getTitle(); ?>">
+                                        <label class="mdl-button mdl-js-button mdl-button--icon" id="btn-search-<?php echo $index; ?>"
+                                               for="search-<?php echo $index; ?>">
                                             <i class="material-icons">search</i>
                                         </label>
+                                        <span for="btn-search-<?php echo $index; ?>"
+                                              class="mdl-tooltip mdl-tooltip--bottom"><?php echo $action->getTitle(); ?></span>
+
                                         <div class="mdl-textfield__expandable-holder">
                                             <input class="mdl-textfield__input" type="text"
                                                    id="search-<?php echo $index; ?>" name="search"/>
@@ -52,11 +56,12 @@
                                         </div>
                                     </div>
 
-                                    <button type="reset"
-                                            class="btn-clear mdl-button mdl-js-button mdl-button--icon"
-                                            title="<?php echo $icons->getIconClear()->getTitle(); ?>">
+                                    <button type="reset" id="btn-reset-<?php echo $index; ?>"
+                                            class="btn-clear mdl-button mdl-js-button mdl-button--icon">
                                         <i class="material-icons"><?php echo $icons->getIconClear()->getIcon(); ?></i>
                                     </button>
+                                    <span for="btn-reset-<?php echo $index; ?>"
+                                          class="mdl-tooltip mdl-tooltip--bottom"><?php echo $icons->getIconClear()->getTitle(); ?></span>
 
                                     <input type="hidden" name="sk" value="">
                                     <input type="hidden" name="start" value="0">
@@ -69,11 +74,13 @@
                         <?php endif; ?>
                     <?php endforeach; ?>
                     <li>
-                        <button type="button"
+                        <button type="button" id="btn-back-<?php echo $index; ?>"
                                 class="btn-back mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored <?php echo $icons->getIconBack()->getClassButton(); ?>"
                                 title="<?php echo $icons->getIconBack()->getTitle(); ?>">
                             <i class="material-icons"><?php echo $icons->getIconBack()->getIcon(); ?></i>
                         </button>
+                        <span for="btn-back-<?php echo $index; ?>"
+                              class="mdl-tooltip mdl-tooltip--bottom"><?php echo $icons->getIconBack()->getTitle(); ?></span>
                     </li>
                     <?php if (count($data->getDataActionsMenu()) > 0): ?>
                         <li>
diff --git a/inc/themes/material-blue/views/main/footer.inc b/inc/themes/material-blue/views/main/footer.inc
index 3b9a49ce..011a4852 100644
--- a/inc/themes/material-blue/views/main/footer.inc
+++ b/inc/themes/material-blue/views/main/footer.inc
@@ -5,30 +5,44 @@
         <?php if ($loggedIn === true): ?>
             <div id="session">
                 <i id="btnLogout" class="material-icons" title="<?php echo _('Salir'); ?>">exit_to_app</i>
+                <span for="btnLogout"
+                      class="mdl-tooltip mdl-tooltip--top"><?php echo _('Salir'); ?></span>
                 <?php if ($showPassIcon): ?>
-                    <i id="btnUserPass" class="btn-action material-icons" title="<?php echo _('Cambiar clave de usuario'); ?>"
+                    <i id="btnUserPass" class="btn-action material-icons"
+                       title=""
                        data-onclick="appMgmt/show"
                        data-action-id="<?php echo \SP\Core\ActionsInterface::ACTION_USR_USERS_EDITPASS; ?>"
                        data-item-id="<?php echo $userId; ?>"
                        data-sk="<?php echo $sk; ?>">security</i>
+                    <span for="btnUserPass"
+                          class="mdl-tooltip mdl-tooltip--top"><?php echo _('Cambiar clave de usuario'); ?></span>
                 <?php endif; ?>
-                <i id="btnPrefs" class="material-icons" title="<?php echo _('Preferencias de usuario'); ?>"
+                <i id="btnPrefs" class="material-icons"
                    data-action-id="<?php echo \SP\Core\ActionsInterface::ACTION_USR_PREFERENCES; ?>">account_circle</i>
                 <?php printf('%s (%s) %s', $userName, $userGroup, $adminApp); ?>
+                <span for="btnPrefs"
+                      class="mdl-tooltip mdl-tooltip--top"><?php echo _('Preferencias de usuario'); ?></span>
             </div>
         <?php endif; ?>
     </div>
     <div id="footer-right" class="footer-parts">
         <div id="status">
             <span class="status-info mdl-color-text--red-900"><?php echo DEBUG ? 'Debug ON' : ''; ?></span>
-            <span class="status-info active-tooltip"
-                  title="<?php echo _('Indica si la conexión utiliza HTTPS.') . '<br><br>' . _('Las claves de formularios enviados se encriptan mediante PKI, el resto de datos no.'); ?>">
+
             <?php if ($httpsEnabled): ?>
-                <i class="material-icons mdl-color-text--teal-500">lock</i>
+                <span id="secure-info" class="status-info">
+                    <i class="material-icons mdl-color-text--teal-500">lock</i>
+                </span>
+                <span for="secure-info"
+                      class="mdl-tooltip mdl-tooltip--top"><?php echo 'HTTPS'; ?></span>
             <?php else: ?>
-                <i class="material-icons mdl-color-text--red-900">lock_open</i>
+                <span id="secure-info" class="status-info">
+                    <i class="material-icons mdl-color-text--red-900">lock_open</i>
+                </span>
+                <span for="secure-info"
+                      class="mdl-tooltip mdl-tooltip--top"><?php echo _('Indica si la conexión utiliza HTTPS.') . '<br><br>' . _('Las claves de formularios enviados se encriptan mediante PKI, el resto de datos no.'); ?></span>
+
             <?php endif; ?>
-            </span>
 
             <?php if ($isDemoMode): ?>
                 <span class="status-info"><?php echo _('Demo'); ?></span>
@@ -38,13 +52,15 @@
         </div>
 
         <div id="project">
-            <a href="<?php echo $appInfo['appwebsite']; ?>" target="_blank" class="active-tooltip"
-               title="<?php echo _('Ayuda :: FAQ :: Changelog'); ?>">
+            <a id="app-info" href="<?php echo $appInfo['appwebsite']; ?>" target="_blank">
                 <?php echo $appInfo['appname'], ' ', $appVersion; ?>
             </a>
+            <span for="app-info"
+                  class="mdl-tooltip mdl-tooltip--top"><?php echo _('Ayuda :: FAQ :: Changelog'); ?></span>
             &nbsp;::&nbsp;
-            <a href="<?php echo $appInfo['appblog']; ?>" target="_blank" class="active-tooltip"
-               title="<?php echo _('Un proyecto de cygnux.org'); ?>">cygnux.org</a>
+            <a id="app-project" href="<?php echo $appInfo['appblog']; ?>" target="_blank">cygnux.org</a>
+            <span for="app-project"
+                  class="mdl-tooltip mdl-tooltip--top"><?php echo _('Un proyecto de cygnux.org'); ?></span>
         </div>
         <!-- Close Project -->
     </div>
diff --git a/inc/themes/material-blue/views/main/login.inc b/inc/themes/material-blue/views/main/login.inc
index 27c417a9..ef23b4c8 100644
--- a/inc/themes/material-blue/views/main/login.inc
+++ b/inc/themes/material-blue/views/main/login.inc
@@ -87,19 +87,3 @@
 <?php if ($updated): ?>
     <div id="boxUpdated" class="round5"><?php echo _('Aplicación actualizada correctamente'); ?></div>
 <?php endif; ?>
-
-<?php if ($demoEnabled): ?>
-    <div id="whatsNewIcon">
-        <img src="imgs/gearscolorful.png" title="<?php echo _('Nuevas Características'); ?>"
-             alt="<?php echo _('Nuevas Características'); ?>" onclick="$('#whatsNew').show(500);"/>
-
-        <h2><?php echo _('Nuevas Características'); ?></h2>
-    </div>
-    <div id="whatsNew" class="round5 shadow">
-        <ul>
-            <?php foreach ($newFeatures as $feature): ?>
-                <li><?php echo $feature; ?></li>
-            <?php endforeach; ?>
-        </ul>
-    </div>
-<?php endif; ?>
diff --git a/inc/themes/material-blue/views/main/menu.inc b/inc/themes/material-blue/views/main/menu.inc
index 6e687cbf..b00105f8 100644
--- a/inc/themes/material-blue/views/main/menu.inc
+++ b/inc/themes/material-blue/views/main/menu.inc
@@ -9,14 +9,15 @@
         <nav class="mdl-navigation mdl-layout--large-screen-only">
             <?php /** @var \SP\Html\DataGrid\DataGridAction $action */
             foreach ($actions as $action): ?>
-                <a class="btn-menu mdl-navigation__link"
-                   title="<?php echo $action->getTitle(); ?>"
+                <a id="btn-<?php echo $action->getId(); ?>" class="btn-menu mdl-navigation__link"
                    data-action-id="<?php echo $action->getId(); ?>"
                     <?php foreach ($action->getData() as $dataName => $dataValue): ?>
                         <?php echo 'data-', $dataName, '="', $dataValue, '"'; ?>
                     <?php endforeach; ?>>
                     <i class="material-icons"><?php echo $action->getIcon()->getIcon(); ?></i>
                 </a>
+                <span for="btn-<?php echo $action->getId(); ?>"
+                      class="mdl-tooltip mdl-tooltip--bottom"><?php echo $action->getTitle(); ?></span>
             <?php endforeach; ?>
         </nav>
     </div>
diff --git a/inc/themes/material-blue/views/main/update.inc b/inc/themes/material-blue/views/main/update.inc
index bd8597d4..4215b365 100644
--- a/inc/themes/material-blue/views/main/update.inc
+++ b/inc/themes/material-blue/views/main/update.inc
@@ -1,23 +1,26 @@
 <?php if ($hasNotices): ?>
-    <a id="notices" href="https://github.com/nuxsmin/sysPass/labels/Notices" target="_blank"
-       class="mdl-badge active-tooltip" data-badge="<?php echo $numNotices; ?>"
-       title="<?php echo $noticesTitle; ?>">
+    <a id="notices-info" href="https://github.com/nuxsmin/sysPass/labels/Notices" target="_blank"
+       class="mdl-badge" data-badge="<?php echo $numNotices; ?>">
         <i class="material-icons mdl-color-text--amber-200">feedback</i>
     </a>
+    <span for="notices-info" class="mdl-tooltip mdl-tooltip--top"><?php echo $noticesTitle; ?></span>
 <?php endif; ?>
 
 <?php if ($hasUpdates): ?>
-    <a id="link-updates" class="active-tooltip" href="<?php echo $url; ?>" target="_blank"
-       title="<?php echo $description; ?>">
+    <a id="link-updates" href="<?php echo $url; ?>" target="_blank">
         <?php echo $title; ?>
         &nbsp;&nbsp;
         <div id="help-hasupdates" class="icon material-icons mdl-color-text--indigo-200">cloud_download</div>
     </a>
+    <span for="link-updates" class="mdl-tooltip mdl-tooltip--top"><?php echo $description; ?></span>
 <?php elseif ($hasUpdates && $status === true): ?>
-    <div class="icon material-icons mdl-color-text--teal-200" title="<?php echo _('Actualizado'); ?>">check_circle</div>
+    <div id="updates-info" class="icon material-icons mdl-color-text--teal-200">check_circle</div>
+    <span for="updates-info"
+          class="mdl-tooltip mdl-tooltip--top"><?php echo _('Actualizado'); ?></span>
 <?php elseif ($hasUpdates && $status === false): ?>
-    <div class="icon material-icons mdl-color-text--amber-200"
-         title="<?php echo _('Error al comprobar actualizaciones'); ?>">
+    <div id="updates-info" class="icon material-icons mdl-color-text--amber-200">
         warning
     </div>
+    <span for="updates-info"
+          class="mdl-tooltip mdl-tooltip--top"><?php echo _('Error al comprobar actualizaciones'); ?></span>
 <?php endif; ?>
\ No newline at end of file