$(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>