displayed footer icon link tooltip

sites/all/modules/figli/edlp_search/src/Plugin/Block/EdlpSearchLinkBlock.php

@@ -29,7 +29,7 @@ class EdlpSearchLinkBlock extends BlockBase {
         'attributes' => array(
           'data-drupal-link-system-path' => $url->getInternalPath(),
           'class' => array('ajax-link'),
-          'title' => t('Search sounds by title, speaker, language, genre or entry'),
+          'alt' => t('Search sounds by title, speaker, language, genre or entry'),
         )
       )
     );

sites/all/modules/figli/edlp_studio/src/Plugin/Block/StudioLinkBlock.php

@@ -60,7 +60,7 @@ class StudioLinkBlock extends BlockBase  implements ContainerFactoryPluginInterf
           'attributes' => array(
             'data-drupal-link-system-path' => $url->getInternalPath(),
             'class' => array('ajax-link'),
-            'title' => t('The studio displays your bookmarked sounds. You can save them and create your own playlists'),
+            'alt' => t('The studio displays your bookmarked sounds. You can save them and create your own playlists'),
           )
         )
       );

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -1319,7 +1319,7 @@
       this.$btn = $('<a>')
         .html('Shuffle')
         .attr('href',this.path)
-        .attr('title', drupalSettings.edlp_corpus.random_link_title)
+        .attr('alt', drupalSettings.edlp_corpus.random_link_title)
         .addClass('random-player-btn');
       this.init();
     };

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -1681,6 +1681,7 @@ body.path-frontpage, body.path-productions{
     font-size: 0.756em;
     white-space: nowrap;
   }
+
 }
 
 footer{
@@ -2087,6 +2088,7 @@ footer{
   @mixin iconlinkblock($bgimgurl, $bgimgurlactive) {
     pointer-events: all;
     margin-left: 0.5em;
+    position: relative;
     // @include btn;
     a{
       box-sizing: border-box;
@@ -2108,6 +2110,20 @@ footer{
         // background-color: red;
         background-image: $bgimgurlactive;
       }
+      &[alt]:hover{
+        // position:relative;
+        &:after{
+          content:attr(alt);
+          position:absolute;
+          right:0; bottom:$icons_w*1.2;
+          width:170px;
+          border: 1px solid red;
+          padding:0.5em;
+          font-size: 0.756em;
+          background-color: white;
+          z-index: 50;
+        }
+      }
       html.is-mobile &{
         $wh:$mobile_icon_w;
         width:$wh; height:$wh;