pop up text on mouse over image

Hi Challenge,

Please try to add this in your child themes functions.php file:

function temporary_removal_title_tags(){
?>
<script>
  window.onload = function() {
      var links = document.querySelectorAll('a, img, *[title]');
      for (var i = 0; i < links.length; i++) {
          var link = links[i];
          link.onmouseover = function() {
              this.setAttribute("data-tooltip", this.title);
              this.title = "";
          };
          link.onmouseout = function() {
              this.title = this.getAttribute("data-tooltip");
          };
          link.onmousedown = function() {
              this.title = this.getAttribute("data-tooltip");
          };
      }
  };
</script>
<?php
}
add_action('wp_footer', 'temporary_removal_title_tags');

If you don’t have a child theme yet, then go to https://kriesi.at/documentation/enfold/child-theme/ and download the child theme there (instructions on how to use it is also there)
Hope it helps.

Best regards,

Nikko

• This reply was modified 1 year, 6 months ago by Nikko.

Hi Reto,

I moved the code to WPCode since it’s easier to manage those custom codes there.
1. The font color of the menu items in the header changes from white to gray when a user starts scrolling down. Also on hover over/mouse over there is no action (font should change from white to gray).
It’s fixed, I noticed it was partially set in in Advanced Styling and Header > Transparency Options > Transparency Menu Color On Hover.

2. On mobile screen: Header is not sticky and disappears when scrolling down. Should be sticky as on normal screen.
I have added this CSS code in Quick CSS:

@media only screen and (max-width:767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}

3. Background color is not correct. Should be gradient transparent as specified in Quick CSS section.
I have added this in Quick CSS:

@media only screen and (max-width:767px) {
  .html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent;
  }

  .html_mobile_menu_tablet #top #wrap_all .av_header_transparency .header_bg {
    background-image: linear-gradient(rgba(20,21,23,1), rgba(20,21,23,0)100%);
    background-color: transparent;
  }
}

4. Logo is too big. How can this be adapted on mobile screen?
I have add this CSS code, please adjust the value as you see fit (default was 80px)

@media only screen and (max-width:767px) {
  .responsive .logo img {
    max-height: 65px;
  }
}
Please review your site.

Best regards,
Nikko

Hi Reto,

No, that code was already in WPCode which I mentioned in the other thread.
This is the code I moved:

function temporary_removal_title_tags(){
?>
<script>
  window.onload = function() {
      var links = document.querySelectorAll('a, img, *[title]');
      for (var i = 0; i < links.length; i++) {
          var link = links[i];
          link.onmouseover = function() {
              this.setAttribute("data-tooltip", this.title);
              this.title = "";
          };
          link.onmouseout = function() {
              this.title = this.getAttribute("data-tooltip");
          };
          link.onmousedown = function() {
              this.title = this.getAttribute("data-tooltip");
          };
      }
  };
</script>
<?php
}
add_action('wp_footer', 'temporary_removal_title_tags');

As for the mobile menu items, the font size depends on what is set as the default font size of the site, if that option is untouched then default is 13px which is what is showing on your site, you can change it by adding this CSS code in Enfold > General Styling > Quick CSS:

#top #av-burger-menu-ul a .avia-menu-text {
    font-size: 18px;
}

Just adjust the value as you see fit.

Best regards,
Nikko

Hi Reto,

I’m glad to hear that :)
Thanks for using Enfold and have a great day!

Best regards,
Nikko