Simple Tooltip I(on mouseover) Oracle JET 3.2.0 JSFiddle plus Tooltip

Forked from Base fiddle with Oracle JET 3.2.0 using CDN

by Lucas Jellema

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
<div id='container'>
  <h1 title="Application Name" data-bind="text: title"></h1>
  <div id="hoverTarget">
    <span id="sa2" data-bind="event:{mouseover:$root.showPopup(event)}">Hover over me</span>
  </div>
  <div style="display:none" id="popup1"
       data-bind="ojComponent:{component: 'ojPopup'}">
       <div id="popupcontent">
       Application:<span data-bind="text: title"></span><br/>
       Year:<span data-bind="text: year"></span><br/>
       </div>
  </div>
</div>

CSS

@import url('//static.oracle.com/cdn/jet/v3.2.0/default/css/alta/oj-alta-min.css');

JavaScript

require(['knockout',
  'ojs/ojcore',
  'jquery',
  'custom-modules/my-module',
  'ojs/ojknockout',
  'ojs/ojpopup'
], function(ko, oj, $, mymodule) {
  'use strict';

  var ViewModel = function() {
    var self = this;
    self.title = ko.observable();
    self.title(mymodule.application.name + " plus tooltip");
    self.year = ko.observable();
    self.year(mymodule.application.year);
    self.showPopup = function(event) {
        if (event) {
          $("#popup1").ojPopup(); // initialize 
          var currentTarget = event.currentTarget; // line seems necessary to get data bound content into popup
          $("#popup1").ojPopup('open');
        } //if
      } //showPopup

  }; //ViewModel
  ko.applyBindings(new ViewModel(), document.getElementById('container'));
});

function _getCDNPath(paths) {
  var cdnPath = "https://static.oracle.com/cdn/jet/";
  var ojPath = "v3.2.0/default/js/";
  var thirdpartyPath = "v3.2.0/3rdparty/";
  var keys = Object.keys(paths);
  var newPaths = {};

  function _isoj(key) {
    return (key.indexOf('oj') === 0 && key !== 'ojdnd');
  }
  keys.forEach(function(key) {
    newPaths[key] = cdnPath + (_isoj(key) ? ojPath : thirdpartyPath) + paths[key];
  });
  // add custom modules - path references to GitHub through RawGit
  newPaths['custom-modules'] = "https://rawgit.com/lucasjellema/supporting-sources/master/basic-jet-snippet";
  return newPaths;
}

requirejs.config({
  paths: _getCDNPath({
    'knockout': 'knockout/knockout-3.4.0',
    'jquery': 'jquery/jquery-3.1.1.min',
    'jqueryui-amd': 'jquery/jqueryui-amd-1.12.0.min',
    'promise': 'es6-promise/es6-promise.min',
    'ojs': 'min',
    'ojL10n': 'ojL10n',
    'ojtranslations': 'resources',
    'signals': 'js-signals/signals.min',
    'text': 'require/text',
    'hammerjs': 'hammer/hammer-2.0.8.min',
    'ojdnd': 'dnd-polyfill/dnd-polyfill-1.0.0.min',
    'customElements': 'webcomponents/CustomElements'
  }),
  // Shim configurations for modules that do not expose AMD
 ...