Как разместить подсказку ниже остальных элементов

Попробуйте вынести подсказку из трансформируемого блока.

Спасибо, но мне как начинающему будет нелегко это сделать, может подскажете, как это реализовать?

Вот этот кусок

<div class="callback_hover"><span>Подсказка</span></div>

выдерните из кода и вставьте в конце кода. Может быть, надо будет весь код обернуть в div - но это по обстоятельствам. И посмотреть, что-то может быть надо изменить к стилях для .callback_hover

Добавил div, переместил <div class="callback_hover"><span>Подсказка</span></div>, так подсказка не участвует в анимации и находится ниже остальных элементов кнопки. Теперь нужно как-то привязать подсказку к кнопке, что можно со стилями сделать?

---------- Добавлено 14.09.2017 в 08:48 ----------

Пока такой результат

https://jsfiddle.net/w6d5cjqv/1/

В скрипте в двух местах замените

$('.callback').css

на

$('.callback,.callback_hover').css

Правда, остальной код там не идеален, но это уже другой вопрос.

Спасибо, теперь при наведении курсора подсказка появляется за кнопкой. Но есть один момент. При движении кнопки вверх или вниз, при наведении в таком случае подсказка появляется не за кнопкой, а сразу внизу или вверху, там куда должна "приехать" кнопка. Я немного уменьшил скорость анимации скрипта, чтобы это было заметно. Что можно с этим сделать?

Согласен, коду далеко до идеала, но саму кнопку проверял в разных браузерах, кнопка и анимация везде смотрится корректно. Был бы признателен, если бы вы могли указать на неточности в коде, хотелось бы его доработать до нормального состояния.

Есть еще вопрос.

При обновлении страницы, при первом наведении курсора, подсказка появляется не плавно, без паузы, указанной в скрипте animate({'opacity':1},1000). Все последующие наведения скрипт отрабатывает корректно.

Еще раз спасибо за поддержку.

---------- Добавлено 14.09.2017 в 15:36 ----------

Обновленный код

https://jsfiddle.net/w6d5cjqv/4/

Из стилей .callback_hover уберите display: none; и сделайте opacity: 0;

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

https://jsfiddle.net/w6d5cjqv/5/

Ничего там не опережает.

Немного не так. Если обновить страницу и навести курсор, тогда не опережает, но если после остановки кнопки скролить вниз или вверх, кнопка начнет падать (подсказка не должна быть активна) и в момент ее движения активировать подсказку, то она появляется не на уровне кнопки, а в месте, где кнопка должна остановиться.

Добавил фон для наглядности.

https://jsfiddle.net/w6d5cjqv/6/