Availity UIKit - JavaScript

Tooltips

Tooltips provide text-only contextual information on hover. They are particularly useful for providing small tidbits of information, such as a definition of a term or an additional explanation of what an action does.


<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</button>

<!-- Javascript -->
<script type="text/javascript">
$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});
</script>

Select2

Single Select

State


<div class="form-group">
  <label for="single-select" class="control-label">State</label>
  <select id="single-select" class="form-control select2">
      <option></option>
      <optgroup label="Alaskan/Hawaiian Time Zone">
          <option value="AK">Alaska</option>
          <option value="HI">Hawaii</option>
      </optgroup>
  </select>
</div>

<!-- Javascript -->
<script type="text/javascript">
import $ from 'jquery';

$('select').select2({
  placeholder: 'Select a State',
  allowClear: true
});
</script>

Multiple Select

States


<div class="form-group">
  <label for="multiple" class="control-label">States</label>
  <select id="multiple" class="form-control select2-multiple" "="" multiple>
    <optgroup label="Alaskan/Hawaiian Time Zone">
      <option value="AK">Alaska</option>
      <option value="HI">Hawaii</option>
    </optgroup>
  </select>
</div>

<!-- Javascript -->
<script type="text/javascript">
import $ from 'jquery';

$('select').select2({
  placeholder: "Select a State"
});
</script>

Popovers

Popovers are small modular windows, which appear on top of other content. While tooltips provide a small amount of information on hover, popovers provide space for greater amounts of information and should be triggered on click. Because they're triggered by click, and don't rely on mouse position (as they would on hover), popovers may contain links and other small interactive content.


<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<!-- Javascript -->
<script type="text/javascript">
$(function () {
  $('[data-toggle="popover"]').popover();
});
</script>

Modal windows are panels which appear on top of other page content, providing new information within the same page. They are segmented from other page content through a shadowed background and three-dimensional visual elements, which convey that this content is floating on top of other page content. Modals should always be opened through a user action, such as clicking a link, and should be closed through a click or keyboard ESC press.


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Loading Indicator

loading

•••


<div class="loading-indicator">
  <p class="loading-text">loading</p>
  <span class="loading-bullet">•</span><span class="loading-bullet">•</span><span class="loading-bullet">•</span>
</div>

Date Picker

A dedicated input field used for date inputs, which assumes a standard slash-delineated date form (e.g. 10/31/2014). Users can manually enter a date, or select from the datepicker (calendar) which opens when the field receives focus.


<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <div class="input-group date" id="datetimepicker6">
            <input type="text" class="form-control">
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Javascript -->
<script type="text/javascript">
  $('#datetimepicker6').datetimepicker();
</script>

Charts

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent. The bars can be plotted vertically or horizontally.


<canvas id="guideChart1" width="900" height="400"></canvas>

<!-- Javascript -->
<script>

const $chart1 = $('#guideChart1');
if ($chart1[0]) {

  const ctx = $chart1[0].getContext('2d');

  /* eslint no-new: 0 */
  new Chart(ctx, {
    type: 'bar',
    data,
    options: {
      responsive: true,
      maintainAspectRatio: false
    }
  });

}

</script>