diff --git a/core/modules/shortcut/css/shortcut.theme.css b/core/modules/shortcut/css/shortcut.theme.css
index e251f62..9984ae1 100644
--- a/core/modules/shortcut/css/shortcut.theme.css
+++ b/core/modules/shortcut/css/shortcut.theme.css
@@ -27,33 +27,3 @@
   display: inline-block;
   margin-left: 0.3em;
 }
-.add-or-remove-shortcuts .text {
-  background: #000000;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 5px;
-  padding: 0 5px;
-  color: #ffffff;
-  display: inline-block;
-  margin-left: 0.3em;
-  opacity: 0;
-  -ms-transform: translateY(-12px);
-  -moz-transform: translateY(-12px);
-  -webkit-transform: translateY(-12px);
-  transform: translateY(-12px);
-  -webkit-transition: all 200ms ease-out;
-  -moz-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  -ms-backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
-.add-or-remove-shortcuts a:hover .text,
-.add-or-remove-shortcuts a:focus .text {
-  opacity: 1;
-  -o-transform: translateY(-2px);
-  -ms-transform: translateY(-2px);
-  -moz-transform: translateY(-2px);
-  -webkit-transform: translateY(-2px);
-  transform: translateY(-2px);
-}
diff --git a/core/modules/shortcut/shortcut.module b/core/modules/shortcut/shortcut.module
index e433c82..89f8cb5 100644
--- a/core/modules/shortcut/shortcut.module
+++ b/core/modules/shortcut/shortcut.module
@@ -374,13 +374,13 @@ function shortcut_preprocess_page(&$variables) {
     $link_mode = isset($shortcut_id) ? "remove" : "add";
 
     if ($link_mode == "add") {
-      $link_text = shortcut_set_switch_access() ? t('Add to %shortcut_set shortcuts', array('%shortcut_set' => $shortcut_set->label())) : t('Add to shortcuts');
+      $link_text = shortcut_set_switch_access() ? t('Add to @shortcut_set shortcuts', array('@shortcut_set' => $shortcut_set->label())) : t('Add to shortcuts');
       $route_name = 'shortcut.link_add_inline';
       $route_parameters = array('shortcut_set' => $shortcut_set->id());
     }
     else {
       $query['id'] = $shortcut_id;
-      $link_text = shortcut_set_switch_access() ? t('Remove from %shortcut_set shortcuts', array('%shortcut_set' => $shortcut_set->label())) : t('Remove from shortcuts');
+      $link_text = shortcut_set_switch_access() ? t('Remove from @shortcut_set shortcuts', array('@shortcut_set' => $shortcut_set->label())) : t('Remove from shortcuts');
       $route_name = 'shortcut.link_delete';
       $route_parameters = array('shortcut' => $shortcut_id);
     }
@@ -394,7 +394,7 @@ function shortcut_preprocess_page(&$variables) {
         ),
         '#prefix' => '<div class="add-or-remove-shortcuts ' . $link_mode . '-shortcut">',
         '#type' => 'link',
-        '#title' => '<span class="icon"></span><span class="text">'. $link_text .'</span>',
+        '#title' => '<span data-ui-tooltip="xxx" title="'. $link_text .'" class="icon"></span>',
         '#route_name' => $route_name,
         '#route_parameters' => $route_parameters,
         '#options' => array('query' => $query, 'html' => TRUE),
diff --git a/core/themes/seven/css/components/jquery.ui.tooltip.css b/core/themes/seven/css/components/jquery.ui.tooltip.css
new file mode 100644
index 0000000..0ac27b7
--- /dev/null
+++ b/core/themes/seven/css/components/jquery.ui.tooltip.css
@@ -0,0 +1,9 @@
+.ui-tooltip {
+  position: absolute;
+  z-index: 9999;
+  max-width: 300px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+  padding: 0 5px;
+  color: #ffffff;
+}
diff --git a/core/themes/seven/js/tooltips.js b/core/themes/seven/js/tooltips.js
new file mode 100644
index 0000000..1ba6019
--- /dev/null
+++ b/core/themes/seven/js/tooltips.js
@@ -0,0 +1,10 @@
+(function ($) {
+
+  "use strict";
+
+  $(document).tooltip({
+    position: { my: "left+5 center", at: "right center" },
+    show: { effect: "blind", duration: 800, delay: 100 },
+  });
+
+})(jQuery);
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index cc4efee..72419b0 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -18,6 +18,16 @@ install-page:
   dependencies:
     - system/maintenance
 
+tooltips:
+  version: VERSION
+  js:
+    js/tooltips.js: {}
+  css:
+    theme:
+      css/components/jquery.ui.tooltip.css: {}
+  dependencies:
+    - core/jquery.ui.tooltip
+
 drupal.nav-tabs:
   version: VERSION
   js:
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 18652ad..6313b00 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -34,6 +34,11 @@ function seven_preprocess_page(&$variables) {
     '#theme' => 'menu_local_tasks',
     '#secondary' => isset($variables['tabs']['#secondary']) ? $variables['tabs']['#secondary'] : '',
   );
+
+  // Attach jQuery UI Tooltip library to shortcut
+  if(isset($variables['title_suffix']['add_or_remove_shortcut'])) {
+    $variables['title_suffix']['add_or_remove_shortcut']['#attached']['library'][] = 'seven/tooltips';
+  }
 }
 
 /**