Каким образом сделать анимированную всплывашку?

Максим Ленский, хотелось бы конечно и чтобы при клике открывалась доп информация
Но тк данная информация будет скрыта на маленьких устройствах, то думаю можно и упустить момент клика
Фин Дел, Спасибо Вам огромное за предоставленный пример, очень помогли

Каким образом сделать анимированную всплывашку?

malayamarisha, верно, например, при наведении в шапке на троеточие всплывает доп информация

Каким образом сделать анимированную всплывашку?

Максим Ленский, в примере при наведении на троеточие появляется всплывашка

По какой причине при отладке на вкладке variables могут отсутствовать значения?

Прилагаю настройки
PHP Remote Debug

Servers

Settings php

Debug

Каким образом сохранить назначенный класс после обновления страницы?

Спасибо за пример.
Пока разбираюсь с записью/удалением из localStorage
Записать вроде удалось. Т.е. кликаем на "кнопку", она выделяется и id элемента записывается в localStorage.
Только вот почему-то id дублируется (в localStorage по два id-шника). Пока это не так важно, попозже поразбираюсь.

if(result == 1)
{
var favorItem = $('.favorites[data-item="'+id+'"]').addClass('activeFavorite');
const activeFavoriteID = [];
const favorite = document.getElementsByClassName('activeFavorite');
for (inp of favorite) 
{
         if (inp.getElementsByClassName('activeFavorite'))
          {
               activeFavoriteID.push(inp.id);
               console.log('dfvghjk');
            }
}
localStorage.setItem('activeFavoriteID', JSON.stringify(activeFavoriteID));
}

А вот каким образом теперь удалить id из localStorage, если у товара отменили выделение кнопки?
Делаю так:

if(result == 2)
{
       $('.favorites[data-item="'+id+'"]').removeClass('activeFavorite');
                $('.favorites[data-item="'+id+'"]').addClass('remove');
                const activeFavoriteID = [];
                const favorite = document.getElementsByClassName('remove');

                for (inp of favorite) {
                    if (inp.getElementsByClassName('remove'))
                    {
                        activeFavoriteID.pop(inp.id);
                    }
                }
                localStorage.setItem('activeFavoriteID', JSON.stringify(activeFavoriteID));
}

Но в таком случае удаляются все элементы в localStorage.
Подскажите, пожалуйста, что делаю не так? Спасибо.

Каким образом сохранить назначенный класс после обновления страницы?

hzzzzl, спасибо что откликнулись.
Не совсем понимаю.

localStorage.setItem('favorites', JSON.stringify([id]))

Тогда при клике на "Добавить в избранное" в localStorage записывается только один id, т.е. только тот, который был выделен последний раз.
А есть какой-нибудь рабочий пример чтобы наглядно посмотреть?

Каким образом сохранить назначенный класс после обновления страницы?

Спасибо что откликнулись.
Только не пойму как сделать.
Если например товар выделен, то в localStorage.setItem('favorItem', 1); записать 1, иначе 2.
Но ведь "Добавить в избранное" может быть у нескольких товаров. Вот на этом и загвоздка, каким образом определить, что именно у этого товара до перезагрузки страницы был выделен "Добавить в избранное".
Подскажите, пожалуйста.

Каким образом произвести запись ID товара в куки?

"если мой ответ помог - отметьте его решением" - отмечено
" больше одного элемента в избранном не сохраняется?" - верно. Но этот момент уже подправлен, вроде работает всё как нужно.

"Меня ещё немного смущает прямое указание списка кук в аякс-запросе" - это во время тестирования куки было добавлено. На данный момент передача куки работает без данного параметра.

Ещё раз, спасибо Вам огромное. Хорошего дня )

Каким образом произвести запись ID товара в куки?

smilingcheater, Вы гений!
Действительно нужно было перед echo json_encode($result); поставить

\Bitrix\Main\Context::getCurrent()->getResponse()->flush('');

И, не могу удержаться и не сказать - просто уже данное решение было принято и хотелось разобраться что к чему. Спасибо Вам огромное.

Сейчас, правда, передается только один элемент массива...

Каким образом произвести запись ID товара в куки?

Спасибо что откликнулись.
Немного не верно код оформлен в пункте 3.
На данный момент так:

if ($_GET['id'])
{
    if (!$USER->IsAuthorized()) // Для неавторизованного
    {
        <b>$arElements = unserialize($APPLICATION->get_cookie('favorites'));</b>

        if (!in_array($_GET['id'], $arElements))
        {
            $arElements[] = $_GET['id'];
            $result = 1; // Датчик. Добавляем
        }
        else
        {
            $key = array_search($_GET['id'], $arElements); // Находим элемент, который нужно удалить из избранного
            unset($arElements[$key]);
            $result = 2; // Датчик. Удаляем
        }
        <b>$APPLICATION->set_cookie("favorites", serialize($arElements));</b>
    }
    else
    { // Для авторизованного
        $idUser = $USER->GetID();
        $rsUser = CUser::GetByID($idUser);
        $arUser = $rsUser->Fetch();
        $arElements = $arUser['UF_FAVORITES'];  // Достаём избранное пользователя
        if (!in_array($_GET['id'], $arElements)) // Если еще нету этой позиции в избранном
        {
            $arElements[] = $_GET['id'];
            $result = 1;
        } else
        {
            $key = array_search($_GET['id'], $arElements); // Находим элемент, который нужно удалить из избранного
            unset($arElements[$key]);
            $result = 2;
        }
        $USER->Update($idUser, Array("UF_FAVORITES" => $arElements)); // Добавляем элемент в избранное
    }
}
/* Избранное */
echo json_encode($result);
die(); ?>

В пункте 4, когда ID передается в список товаров для фильтрации

$favorites = $APPLICATION->get_cookie("favorites");

Или так не верно?