jBox Demo

by Michael Baas

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/jBox.all.min.css">
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/jBox.all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
Here should be a Tooltip: <i id="i1" class="fas fa-info-circle text-success" data-jbox-title="R<sup>2</sup>-Adj (%)" data-jbox-content-from="#id1"></i> and one more 
<i id="i2" class="fas fa-info-circle text-success" data-jbox-title="2 at once!" data-jbox-content-from="#id2"></i>

<p>
<button onclick='$("#ttext").toggle();'>
Show/Hide Content of tooltips below
</button>

</p>
<div id="ttext" style="display:none">
  <div id="id1">
  <h3>
Tooltip 1
  </h3>
    <p>"Adjusted R" ist a function of R², the sample size (n), and number of predictors (k).</p>
    <p></p>
    <p>The formula for Adjust R² is:</p>
    <p> \[ AdjRSq = 1-(1-RSq)×{(N-1)\over (N-K-1)}\]</p>
  </div>
  <div id="id2">
  <h3>
  Tooltip2
  </h3>
  <p>Both tooltips created with a single call!</p>p>
  </div>
</div>

CSS

body {
  font-family: sans-serif;
}

.tt {
  width: 200px;
  background: #eee;
  margin: 5px 0;
  padding: 5px;
}

JavaScript

$("[data-jbox-content-from]").each(function() {
console.log(this);
  new jBox("Tooltip", {
    getTitle: "data-jbox-title",
    content: $($(this).attr("data-jbox-content-from"))
  }).open();
});