Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1408563

    Hi
    If I hover over images on my website a pop up with the name of the image file appears. How can I make sure that no pup up is displayed on hover over.
    Many thanks and regards
    Reto

    #1408607

    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 10 months, 1 week ago by Nikko.
    #1409021

    Hi Nikko, thanks again! I have added a child theme and this function and it works perfectly.

    One problem seems to have occurred since your last change on our website (when you solved several issues: https://kriesi.at/support/topic/header-logo-and-menu-issues/) or since I introduced the enfold child theme as you described above:
    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).

    As I stopped the maintenance mode, I was able to test the behavior on my mobile phone and I have found a new problem with our site on mobile screens. The header does not display correctly:
    2. On mobile screen: Header is not sticky and disappears when scrolling down. Should be sticky as on normal screen.
    3. Background color is not correct. Should be gradient transparent as specified in Quick CSS section.
    4. Logo is too big. How can this be adapted on mobile screen?

    Best regards, Reto

    • This reply was modified 10 months ago by retom.
    • This reply was modified 10 months ago by retom.
    #1409098

    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
    #1409134

    Hi Nikko

    Thank you very much for your changes! They work as we have hoped for.
    You mentioned that you moved the code to WP Code. You refer to the “Change Logo Link” snippet, correct?

    On the mobile burger menu the menu items are displayed very small. Do you know how their font size can be changed?

    Best regards
    Reto

    #1409207

    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

    #1409300

    Hi Nikko
    Thanky you very much for your solution. I have increased the font size to 20 and it works fine.
    Best Regards,
    Reto

    #1409342

    Hi Reto,

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

    Best regards,
    Nikko

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘pop up text on mouse over image’ is closed to new replies.