JSFiddle - React, Tailwind, and code Playground

How to alter jBox-data-attributes?

by Michael Baas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/jBox.all.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/jBox.all.min.css">
<table class="w-100">
  <tbody>
    <tr>
      <th>Variable</th>
      <th colspan="2">Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><label for="dt1">Car</label></td>
      <td><select id="dtCar" class="form-control select2 font-fas" name="dtCar" onchange="$('#infoCar').data('jbox-title','blabla');$('#infoCar').data('jbox-content','dummy');">
          <option>Key</option>
          <option selected="selected">Boolean</option>
          <option>Ordinal</option>
          <option>Nominal</option>
          <option>Interval</option>
          <option>Ratio</option>
        </select>
      </td>
      <td><span id="infoCar" data-jbox-content="This field can have one of two values: On or Off, Yes or No, 1 or 0." data-jbox-title="Description of the Boolean Scale">
          <i class="fas fa-info-circle"></i></span></td>
      <td><input id="inCar" class="form-control" name="inCar" type="text" value="Do you own a car?"></td>
    </tr>
  </tbody>
</table>

CSS

.font-fab {
  font-family: 'Font Awesome 5 Brands';
  font-variant-ligatures: none;
}

.font-fal {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  font-variant-ligatures: none;
}

.font-far {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400;
  font-variant-ligatures: none;
}

.font-fab {
  font-family: 'Font Awesome 5 Brands';
  font-variant-ligatures: none;
}

.font-fal {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  font-variant-ligatures: none;
}

JavaScript

$(function() {
  $("[data-jbox-content]").jBox("Tooltip", {
    theme: "TooltipDark",
    id: "jBoxTooltip",
    getTitle: "data-jbox-title",
    getContent: "data-jbox-content"
  });
});