Как реализовать вывод дополнительной информации для наведении?
Как верно заметила Ankhena W решение на чистом CSS вполне работает. Но стоит помнить, что это действие должно происходить не только на :hover, но и на :focus (есть люди, работающие с клавиатуры). Соответственно к элементу, на который вешается hover и focus, скорее всего будет нужно добавить tabindex = 0, чтобы дать этим людям возможность перемещаться по вашим элементам с помощью tab. Пример с плавным появление дополнительной информации: codepen.io/sfi0zy/pen/KNwZGE?editors=1100
JS или на чистом CSS, если скрытый блок вложен в родительский или рядом.
Суть в том, что доп.информация сначала скрыта display:none
При hover она показывается.
codepen.io/anon/pen/pNvpWq (тут он открывается в сторону, но сути не меняет)