Андрей Гончаров

Проверь, правильно ли указан метатег вьюпорта. Для респонсива должен быть так:

<meta name="viewport" content="width=device-width, initial-scale=1">

Местоположение подсказки относительно кнопки нужно считать от правого края, т.е. у подсказки:

position: absolute;
right: XXXpx;
top: XXpx;

Сейчас вероятно позиционируется относительно левого края кнопки с отрицательным значением

На самом деле не все тривиально. Нам нужно с одной стороны сохранить интерактивность карты, с другой сделать респонсивную полупрозрачную рамку.
Для сохранения интерактивности карты не подойдет использовать один элемент с широкой обводкой, т.к. события мыши будут активны на нем, а не на карте. Поставив этому элементу pointer-events: none, мы потерям возможность выделения текста и копирования контактной инфы, которая будет распологаться на этой рамке.

Вывод нужно сделать 4 элемента по одному на каждую сторону маски, чтобы центр был активным для карты, однако задача ослажняется респонсивом с прозрачной маской. С левым и правым краем все понятно: высота 100% и ширина допустим 200px, верхний и нижний край должны быть высотой допустим 200px а вот ширину надо вычислять скриптами, т.к. если поставим 100% то полупрозрачности наложатся и получится некрасиво. Ширину вычислисть скриптом по принципу: ширина = ширина.окна - 400px в нашем случае

http://howstuffworks.ru/test/libs\jquery\jquery-2.1.3.min.js

Попробуй поставить слешы в нужную сторону, хром видимо это сам фиксит, а вот в файрфоксе у тебя не загружается именно jquery