Demo - Tooltips

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<div class="container">

  <h1>
    Tooltips
  </h1>
  <p>
    Tooltips are provided by yhe Wijmo core. They are not controls,
    but popups containing HTML that appear when the mouse hovers
    over designated elements.</p>
  <p>
    You can associate a tooltip with one or more elements on the
    page using the <b id="setTooltip">Tooltip.setTooltip</b> method.</p>
  <p>
    And this paragraph has a <b id="theSpan">span with a tooltip</b>
    and another <i id="theOtherSpan">span with a different tooltip</i>.</p>
  <p>
    The buttons below also have tooltips:</p>
  <button id="btnAddNew" class="btn btn-default">
    addNew
  </button>
  <span id="spanPop"></span>
  <br>
  <button id="btnPush" class="btn btn-default">
    push
  </button>
  <br>
  <button id="btnPushDefer" class="btn btn-default">
    push + defer updates
  </button>
  
  <div style="display:none">
    <div id="setTooltipDocs">
      <p>
        The <b>setTooltip</b> method a ssigns tooltip content to given elements on the page.
      </p>
      <p>
         The same tooltip may be used to display information for any number
         of elements on the page. To remove the tooltip from an element, 
         call the <b>setTooltip</b> method and specify null for the content.
      </p>
    </div>
  </div>
</div>

CSS

.btn {
  margin: 4px;
}

JavaScript

onload = function() {

	var tt = new wijmo.Tooltip();
	tt.setTooltip('#setTooltip', '#setTooltipDocs');
	tt.setTooltip('#theSpan', 'This is the <b>first</b> span.');
	tt.setTooltip('#theOtherSpan', 'This is the <b>second</b> span.');
	tt.setTooltip('#btnAddNew', 'Click to add 1,000 items using the <b>addNew</b> method.');
	tt.setTooltip('#btnPush', 'Click to add 1,000 items using the <b>push</b> method.');
	tt.setTooltip('#btnPushDefer', 'Click to add 1,000 items using the <b>push</b> method<br>within a <b>deferUpdate</b> block.');
  document.getElementById('btnAddNew').addEventListener("mouseover", mouseOver);
  //console.log(document.getElementById('btnAddNew'));
  function mouseOver() {
  	console.log('Hello');
  }
}