putting it All together
@linclark
![](https://s3.amazonaws.com/media-p.slid.es/uploads/linclark/images/988464/npm-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1513206/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1515967/GPS_Satellite_NASA_art-iif.jpg)
This view can
be helpful
... but you can
navigate just fine
from here
![](https://s3.amazonaws.com/media-p.slid.es/uploads/linclark/images/988464/npm-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1503233/npm.png)
module ≈ package
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1516014/jquery.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1516028/shield-large_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1516037/Modulecounts.png)
modulecounts.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1516047/jQuery_Plugin_Registry.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1511548/tada.gif)
<!doctype html>
<html>
<head>
<title>Demo</title>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
</head>
<body>
Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1511557/no-tada.gif)
<!doctype html>
<html>
<head>
<title>Demo</title>
<script src="vendor/jquery.js"></script>
<script src="vendor/tipso.js"></script>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
</head>
<body>
Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
<!doctype html>
<html>
<head>
<title>Demo</title>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
</head>
<body>
Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
your-application
jquery
tipso
<!doctype html>
<html>
<head>
<title>Demo</title>
<script src="vendor/jquery.js"></script>
<script src="vendor/tipso.js"></script>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
</head>
<body>
Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
<!doctype html>
<html>
<head>
<title>Demo</title>
<script src="vendor/tipso.js"></script>
<script src="vendor/jquery.js"></script>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
</head>
<body>
Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
your-application
jquery
tipso
jquery
![](https://s3.amazonaws.com/media-p.slid.es/uploads/linclark/images/988464/npm-logo.png)
+
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1512748/wizard_hat_blue.png)
// scripts.js
var jQuery = require('jquery');
require('tipso');
jQuery(function(){
jQuery('.title-tipso').tipso();
});
// jquery.js
// tipso.js
var jQuery = require('jquery');
$ browserify scripts.js > bundle.js
<script src="vendor/tipso.js"></script>
<script src="vendor/jquery.js"></script>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
<script src="bundle.js"></script>
j.mp/npm-browserify
// scripts.js
var jQuery = require('jquery');
require('tipso');
jQuery(function(){
jQuery('.title-tipso').tipso();
});
// jquery.js
// tipso.js
var jQuery = require('jquery');
// scripts.js
global.jQuery = require('jquery');
require('tipso');
jQuery(function(){
jQuery('.title-tipso').tipso();
});
// tipso.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1511297/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1511295/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1511298/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1516874/explode.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1513027/list_of_transforms___substack_node-browserify_Wiki.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1513036/babel.png)
ES6 ES5
var x = "foobar";
console.log(`The
variable
is
${x}`);
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1513060/New_Tab.png)
ES6 Template Strings
jQuery(function(){
var content = `Tooltip content: ${jQuery('.title-tipso').attr('title')}`;
jQuery('.title-tipso').tipso('update', 'content', content);
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1513087/tooltipcontent.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1511557/no-tada.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1513091/safari.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1513092/Google_chrome_logo.png)
$ browserify -t babelify scripts.js > bundle.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1513087/tooltipcontent.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1513091/safari.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1513092/Google_chrome_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1513087/tooltipcontent.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/linclark/images/988464/npm-logo.png)
{
"name": "your-application",
"version": "1.0.0",
"scripts": {
"build": "browserify -t babelify scripts.js > bundle.js"
},
"devDependencies": {
"babelify": "^6.1.2",
"browserify": "^9.0.3"
}
}
$ browserify scripts.js > bundle.js
$ npm run build
j.mp/package-scripts
NPM package scripts
{
"name": "your-application",
"version": "1.0.0",
"scripts": {
"build": "browserify -t babelify scripts.js > bundle.js",
"preversion": "npm run build"
},
"devDependencies": {
"babelify": "^6.1.2",
"browserify": "^9.0.3"
}
}
$ npm version patch
j.mp/npm-lifecycle
npm lifecycle hooks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1312813/wombat.png)
1 free month: jquerysf
questions? @npm_support
![](https://s3.amazonaws.com/media-p.slid.es/uploads/linclark/images/988464/npm-logo.png)
@linclark
Putting it all together-jQuerySF
By Lin Clark
Putting it all together-jQuerySF
- 1,943