chutier icon display promotion message if not loged in

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1459,6 +1459,7 @@ body.ajax-loading main[role="main"]:before {
 
 .chutier-icon {
   display: block;
+  position: relative;
   width: 1em;
   height: 1em;
   overflow: hidden;
@@ -1473,6 +1474,27 @@ body.ajax-loading main[role="main"]:before {
     background-image: url(../img/favori-on.svg); }
   .chutier-icon.ajax-loading {
     opacity: 0.2; }
+  .chutier-icon.not-logedin {
+    overflow: visible; }
+  .chutier-icon .popup {
+    z-index: 10;
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 300px;
+    height: auto;
+    min-height: 100px; }
+    .chutier-icon .popup .inner {
+      background-color: rgba(255, 255, 255, 0.9);
+      border: 1px solid red;
+      text-indent: 0;
+      padding: 0.5em;
+      margin: 1.2em 0 0 1.2em; }
+      .chutier-icon .popup .inner p {
+        margin: 0; }
+  .chutier-icon:hover .popup {
+    display: block; }
 
 body.path-agenda main .col > .wrapper {
   height: 100%; }

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

@@ -387,8 +387,10 @@ main[role="main"]{
  // \__ \  _| || / _` | / _ \
  // |___/\__|\_,_\__,_|_\___/
 .chutier-icon{
+  $s:1em;
   display: block;
-  width:1em;height:1em;
+  position: relative;
+  width:$s;height:$s;
   overflow: hidden;
   text-indent: 50em;
   // background-color: red;
@@ -403,6 +405,29 @@ main[role="main"]{
   &.ajax-loading{
     opacity: 0.2;
   }
+  &.not-logedin{
+    overflow: visible;
+  }
+  .popup{
+    z-index: 10;
+    display:none;
+    position: absolute;
+    top:0; left:0;
+    width:300px; height:auto; min-height: 100px;
+    .inner{
+      background-color: rgba(255,255,255,0.9);
+      border: 1px solid red;
+      text-indent: 0;
+      padding: 0.5em;
+      margin:$s*1.2 0 0 $s*1.2;
+      p{margin: 0;}
+    }
+  }
+  &:hover{
+    .popup{
+      display: block;
+    }
+  }
 }