Как я могу добавить поле для всплывающей подсказки, когда его ширина подходит к краю окна? - PullRequest
0 голосов
/ 07 июля 2019

Я использую плагин tooltipster. Работает нормально. Но я хочу добавить поле, когда оно бежит к краю экрана. Как я могу динамически добавить некоторый запас к нему и сохранить некоторое пространство между краем окна и всплывающей подсказкой в ​​этом случае. Я пробовал некоторые функции, как это:

functionReady: function(instance, helper) {
    if( $( window ).width() == $('.tooltipster-box').outerWidth()) {
        $('.tooltipster-box').css( 'margin-left', '10px' ).css( 'margin-right', '10px' )
    }
    else {
        $('.tooltipster-box').css( 'margin-left', '0' ).css( 'margin-right', '0' )
    }
}

Это очень близко к тому, что я хотел сделать, но он не дал результата точно так, как я хочу, потому что он может создать полосу прокрутки в всплывающих подсказках в пределах некоторого диапазона ширины экрана. Например, когда ширина экрана составляет от 340 до 480 пикселей, у меня есть нежелательная вертикальная полоса прокрутки в окне подсказок.

Мой JavaScript:

$(document).ready(function() {
    $('.tooltip').tooltipster({
        contentCloning: true,
        trigger: 'click',
        interactive: true,
        functionReady: function(instance, helper) {
            if( $( window ).width() == $('.tooltipster-box').outerWidth()) {
                $('.tooltipster-box').css( 'margin-left', '10px' ).css( 'margin-right', '10px' )
            }
            else {
                $('.tooltipster-box').css( 'margin-left', '0' ).css( 'margin-right', '0' )
            }
        }
    });
});

Полный исходный код:

$(document).ready(function() {
    $('.tooltip').tooltipster({
        contentCloning: true,
        trigger: 'click',
        interactive: true,
        functionReady: function(instance, helper) {
            if( $( window ).width() == $('.tooltipster-box').outerWidth()) {
                $('.tooltipster-box').css( 'margin-left', '10px' ).css( 'margin-right', '10px' )
            }
            else {
                $('.tooltipster-box').css( 'margin-left', '0' ).css( 'margin-right', '0' )
            }
        }
    });
});
.tooltip {
    border-bottom: 1px dotted black;
}
.tooltip_templates { display: none; }

#myDiv {
    max-width: 500px;
    border: 1px solid red;
    margin: 0 auto;
}
<link rel="stylesheet" type="text/css" href="https://iamceege.github.io/tooltipster/dist/css/tooltipster.bundle.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://iamceege.github.io/tooltipster/dist/js/tooltipster.bundle.js"></script>
<div id="myDiv">
    <p>Lorem ipsum dolor sit, amet consectetur <span data-tooltip-content="#tooltip_content1" class="tooltip">adipisicing</span> elit. Omnis labore, molestiae rem accusantium culpa tempore repudiandae at, ab, fuga quos itaque totam excepturi in commodi eaque quidem sunt voluptates facilis!</p>

    <p>Lorem, ipsum dolor sit amet <span data-tooltip-content="#tooltip_content2" class="tooltip">consectetur</span> adipisicing elit. Optio illum nam molestiae voluptate dolorem fugiat quos. Ea delectus laboriosam dolores totam. Temporibus similique fugiat ipsa praesentium neque, eius perspiciatis explicabo. Vitae assumenda repellat voluptatum iusto laborum quae obcaecati minus minima labore nemo, dolore aut blanditiis sunt unde inventore quod eaque enim aliquam nostrum veniam magni quibusdam ipsa dolores. Suscipit saepe totam nihil cumque ab minus blanditiis reprehenderit, maxime eveniet, omnis dolorum necessitatibus! Laboriosam, ipsa reiciendis. Aut quasi explicabo illo quis dignissimos? At, dolorem. Vero, odio placeat! Magni fugiat rem ut modi neque quod, nihil maiores sequi error ipsam in suscipit!</p>
    
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio illum nam molestiae voluptate dolorem fugiat quos. Ea delectus laboriosam dolores totam. Temporibus similique fugiat ipsa praesentium neque, eius perspiciatis explicabo. Vitae assumenda repellat voluptatum iusto laborum quae obcaecati minus minima labore nemo, dolore aut blanditiis sunt unde inventore quod eaque enim aliquam nostrum veniam magni quibusdam ipsa dolores. Suscipit saepe totam nihil cumque ab minus blanditiis reprehenderit, maxime eveniet, omnis dolorum necessitatibus! Laboriosam, ipsa reiciendis. Aut quasi explicabo illo quis dignissimos? At, dolorem. Vero, odio placeat! Magni fugiat rem ut modi neque quod, nihil maiores sequi error ipsam in suscipit!</p>
    
    <p>Lorem, ipsum dolor sit amet <span data-tooltip-content="#tooltip_content2" class="tooltip">consectetur</span> adipisicing elit. Optio illum nam molestiae voluptate dolorem fugiat quos. Ea delectus laboriosam dolores totam. Temporibus similique fugiat ipsa praesentium neque, eius perspiciatis explicabo. Vitae assumenda repellat voluptatum iusto laborum quae obcaecati minus minima labore nemo, dolore aut blanditiis sunt unde inventore quod eaque enim aliquam nostrum veniam magni quibusdam ipsa dolores. Suscipit saepe totam nihil cumque ab minus blanditiis reprehenderit, maxime eveniet, omnis dolorum necessitatibus! Laboriosam, ipsa reiciendis. Aut quasi explicabo illo quis dignissimos? At, dolorem. Vero, odio placeat! Magni fugiat rem ut modi neque quod, nihil maiores sequi error ipsam in suscipit!</p>
</div>
<div class="tooltip_templates">
    <span id="tooltip_content1">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat hic qui nulla cum voluptatum unde consequuntur repellendus eligendi! Et dignissimos, explicabo recusandae quidem iste aut? Cumque, omnis unde a ex modi, consequatur pariatur eius eaque dolores neque excepturi maiores facere incidunt nesciunt temporibus enim natus numquam sed recusandae! Beatae, sunt!</p>
    </span>
</div>
<div class="tooltip_templates">
    <span id="tooltip_content2">
        <p>Lorem ipsum dolor sit amet.</p>
    </span>
</div>
<div class="tooltip_templates">
    <span id="tooltip_content3">
        <p>Lorem ipsum dolor sit amet.</p>
    </span>
</div>
...