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>
  <br>
  <button id="btnPush" class="btn btn-default">
    push
  </button>
  <br>
  <button id="btnPushDefer" class="btn btn-default">
    push + defer updates
  </button>
	<br>
	<button id="btnImage" class="btn btn-default">
    toolTip with uploaded image
  </button><br>
	<button id="btnImageAdder" class="btn btn-default">
    Add image to tooltip above
  </button>
	<input id="upload" type="file" name="pic" accept="image/*"/>
</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.');
	//tt.setTooltip('#btnImage', '<img id="uploadImage">');
	
	//console.log(tt);
	
	document.getElementById("btnImageAdder").addEventListener("click", function() {
		tt.setTooltip('#btnImage', '<img style="width: 100px" src="https://demos.wijmo.com/5/React/FlexGridIntro/FlexGridIntro/resources/US.png">');
	});
	
	document.getElementById("upload").addEventListener("change", function() {
		//var image = document.getElementById("uploadImage");
		//image.src = URL.createObjectURL(event.target.files[0]);
		var imgName = event.target.files[0].name;
		console.log(event.target.files[0].name);
		tt.setTooltip('#btnImage', `<img style="width: 100px" src="${imgName}">`);
		console.log(tt);
	});
	
	/*var updateTooltip = function(event) {
		console.log('Hello');
		var image = document.createElement("img");
		image.src = URL.createObjectURL(event.target.files[0]);
		tt.setTooltup('#btnImage', image);
	}*/
	//tt.setTooltip('#btnImage', '<img style="width: 100px" src="https://demos.wijmo.com/5/React/FlexGridIntro/FlexGridIntro/resources/US.png">');
}