Как скрыть всплывающую подсказку при скроллинге страницы?

Question

[Наталия]

Добрый день!
Есть HTML :

<div id="container">
    <div id="newSS">
        <div><img src="https://pp.userapi.com/c633325/v633325226/3cce5/Dy0fXnIt8pI.jpg" /></div>      
    </div>
    <div id="newSS_2">        
        <div><img src="http://liubavyshka.ru/_ph/103/1/836833657.jpg" /></div>
    </div>
</div>

CSS:

#newSS {
    width:180px;
    height: 180px;
}
#newSS_2 {
    width:180px;
    height: 180px;
}
#container {
  overflow-y: scroll;
  border: 1px solid black;
  height: 300px;
  width: 100%;
}

Script:

$(document).ready(function(){
            var a = 'тут какой-то текст №1';
            var b = 'тут какой-то текст №2';
    $('#newSS div').hover(function(){            
       $(this).append('<div class="aa">'+a+'</div>');
    }, function(){ 
    $(this).children('.aa').remove(); 
    });
    
    $('#newSS_2 div').hover(function(){            
       $(this).append('<div class="bb">'+b+'</div>');
    }, function(){ 
    $(this).children('.bb').remove(); 
    });
    
});

Подскажите, пожалуйста, как можно сделать так, чтоб при разрешении экрана менее 700px при скроллинге скрытый блок не отображался при hover 'е ?
заранее спасибо аз помощь.

Answer 1

[Наталия]

Решение:
https://jsfiddle.net/nlynx/v5vfdwh3/2/

(+спасибо Lumore)

Answer 2

[Lumore]

@media screen and (max-width: 700px) {
   #newSS_2 div {
      display: none !important;
   }
}

Comments

[Наталия]

спасибо! чуть поправила Ваше решение:
https://jsfiddle.net/nlynx/v5vfdwh3/2/
- работает так, как надо