<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<script src="http://ux.verint.com/bootstrap-4.0.0/dist/other/bootstrap-tooltip-custom-class.js"></script>
<div class="card"><script>
$(function () {
<div class="card-header">Tooltips <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Plain Example</label>
<div class="col-lg-4">
<button class="btn btn- $('[data-toggle="tooltip"], [data-toggle-second="tooltip"]').tooltip({trigger: 'hover', delay: { "show": 100, "hide": 0 }});
$('.is-invalid, .is-warning').on('shown.bs.tooltip', function () {
var x = $(this).offset().left + $(this).width();
var y = $(this).offset().top;
$('.bs-tooltip-right').css('transform', 'translate3d('+x+'px, '+y+'px, 0px)');
});
});
</script>
<div class="card">
<div class="card-header">Tooltips <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-placement="right" title="Aliquam sollicitudin, tincidunt mi volutpat semper" data-html="true" >
Regular Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-placement="right" title="Aliquam sollicitudin, tincidunt mi volutpat semper" data-html="true" >
Regular Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular Header Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-placement="right" title="<header>Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper sollicitudin, tincidunt</main>" data-html="true" >
Header Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-placement="right" title="<header>Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper sollicitudin, tincidunt</main>" data-html="true" >
Header Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error Header Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-error" data-placement="right" title="<header>Error Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
Error Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-error" data-placement="right" title="<header>Error Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
Error Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error Minimal Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-error minimal" data-placement="right" title="Aliquam sollicitudin, tincidunt mi volutpat semper" data-html="true" >
PlainError Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltiptooltip" data-custom-class="tooltip-error minimal" data-placement="right" title="Aliquam sollicitudin, tincidunt mi volutpat semper" data-html="true" >
PlainError Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Plain>Warning Header Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-warning" data-placement="right" title="<header>Tooltip<header>Warning Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, sollicitudin,tincidunt tincidunt<sollicitudin</main>" data-html="true" >
HeaderWarning Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-warning" data-placement="right" title="<header>Tooltip<header>Warning Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, sollicitudin,tincidunt tincidunt<sollicitudin</main>" data-html="true" >
HeaderWarning Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error>Warning HeaderMinimal Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-errorwarning minimal" data-placement="right" title="<header>Error Tooltip Header</header><main>Aliquam Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
ErrorWarning Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-errorwarning minimal" data-placement="right" title="<header>Error Tooltip Header</header><main>Aliquam Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
ErrorWarning Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Warning>Information Header Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-warninginfo" data-placement="right" title="<header>Warning<header>Informative Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
WarningInformation Tooltip
</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-warninginfo" data-placement="right" title="<header>Warning Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
Warning Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row<header>Informative Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
Information Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Information Minimal Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-info minimal" data-placement="right" title="Aliquam sollicitudin, tincidunt volutpat">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Info Header Example</label> Information Tooltip
</button>
</div>
<div class="col-lg-46">
<button<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-info minimal" data-placement="right" title="<header>Informative Tooltip Header</header><main>AliquamAliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" ">
Information Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
Info Tooltip
</button><label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Help Header Example</label>
</div>
<div class="col-lg-64">
<pre<button class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-infohelp" data-placement="right" title="<header>Informative<header>Help Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" >
Info Tooltip
</button></script></code></pre> >
</div> Help Tooltip
</div>button>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Help Header Example</label> </div>
<div class="col-lg-46">
<button<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-help" data-placement="right" title="<header>Help Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>" data-html="true" tincidunt sollicitudin</main>" data-html="true" >
Help Tooltip
</button></script></code></pre>
</div>
</div>
<div class="form-group row">
Help Tooltip
</button>
</div><label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Help Minimal Example</label>
<div class="col-lg-64">
<pre<button class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-help" data-placement="right" title="<header>Help Tooltip Header</header><main>Aliquam sollicitudin, tincidunt volutpat mi semper, tincidunt sollicitudin</main>"tooltip-help minimal" data-htmlplacement="trueright" >
Help Tooltip
</button></script></code></pre>title="Aliquam sollicitudin, tincidunt volutpat">
</div>
Help Tooltip
</div>button>
</div>
</div>
<script>
$(function () {div>
$('[data-toggle="tooltip"]').tooltip({delay: { "show": 100, "hide": 0 }});
$('.is-invalid').on('shown.bs.tooltip', function () {
var x = $(this).offset().left + $(this).width();
var y = $(this).offset().top;
$('.bs-tooltip-right').css('transform', 'translate3d('+x+'px, '+y+'px, 0px)');
});
})
</script> <div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="tooltip" data-custom-class="tooltip-help minimal" data-placement="right" title="Aliquam sollicitudin, tincidunt volutpat">
Help Tooltip
</button></script></code></pre>
</div>
</div>
</div>
</div> |