Как сделать, чтобы при наведении на блок появлялась надпись в отдельной области?

Question

[pelemexa2]

есть 4 скриншота на 1 показано то как все должно выглядеть

на скриншоте 2 то как выглядит на данный момент

на скриншоте 3 показан код html

на скриншоте 4 показано как выглядит код JS

этот момент кода делает так чтобы при наведении на блок текст менялся, к этому надо добавить чтобы появлялась надпись "нажмите для продолжения" это надпись НЕ КНОПКА

КОД HTML

<li class="slide-02 disable_block444as2">
          <div class="tooltip">
            <h4 class="tooltip-row-block" style="margin-top: 0px;">Договор публичный оферты</h4><span class="inner tooltip-row-block">Нажмите для продолжения</span>
                        <p href="" id="test">
              Настоящий договор между владельцем сайта в сети интернет Гаврилова Никиты Александровича и пользователем услуг сайта в сети интернет,  именуемым в дальнейшем «Покупатель» определяет условия приобретения услуги через сайт http://qvinciy.ru  Настоящий договор – оферта действует с 01 Августа 2019 года.</p>
              <br><br><br><br>
              1. ОБЩИЕ ПОЛОЖЕНИЯ

              <br><br>

КОД JS

$(document).on('mouseover', '.tooltip', function(event){
    var obj = $(this)
    obj.html("Договор публичный оферты<br><br>Настоящий договор между владельцем сайта в сети интернет Гаврилова Никиты Александровича и пользователем услуг сайта в сети интернет,  именуемым в дальнейшем «Покупатель» определяет условия приобретения услуги через сайт http://qvinciy.ru  Настоящий договор – оферта действует с 01 Августа 2019 года.<br><br>                                       1. ОБЩИЕ ПОЛОЖЕНИЯ <br><br>                                          1.1. Владелец сайта в сети интернет публикует настоящий договор, являющийся публичным договором - офертой (предложением) в адрес физических и юридических лиц в соответствии со ст. 435 и пунктом 2 статьи 437 Гражданского Кодекса Российской Федерации (далее - ГК РФ).")        
})
$(document).on('mouseout', '.tooltip', function(event){
    var obj = $(this)
    obj.html("Договор публичный оферты<br><br>Настоящий договор между владельцем сайта в сети интернет Гаврилова Никиты Александровича и пользователем услуг сайта в сети интернет,  именуемым в дальнейшем «Покупатель» определяет условия приобретения услуги через сайт http://qvinciy.ru  Настоящий договор – оферта действует с 01 Августа 2019 года.")        
})

Comments

[RAX7]

6. Категорически запрещается вводить пользователей Сервиса в заблуждение, в том числе:
....
6.5. Использовать другие аккаунты с целью обхода суточных ограничений, правил Сервиса и санкций за нарушение правил Сервиса;
https://toster.ru/help/rules

[Алексей Юдов]

https://toster.ru/help/rules пункт 3.8

Answer 1

[Пашенька]

Можно завернуть все параграфы в единый контейнер, назовём его <div id="text">...</div,>, тогда:

$(document).on('mouseover', '#text', function(event){
    var obj = $(this),
    $('.tooltip-row-block').css('display', 'block');
    obj.html("Настоящий договор ололо трололо ... ...");
});
$(document).on('mouseout', '#text', function(event){
    var obj = $(this);
    $('.tooltip-row-block').css('display', 'none');
    obj.html("Настоящий договор ололо трололо ...");
});

А вообще вы странные вещи делаете. У вас проблемы с архитектурой.