Skip to content

Instantly share code, notes, and snippets.

@jasonmit
Created February 21, 2014 23:43
Show Gist options
  • Save jasonmit/9146072 to your computer and use it in GitHub Desktop.
Save jasonmit/9146072 to your computer and use it in GitHub Desktop.
Ember Tooltip (raw) http://jsfiddle.net/NQKvy/776/
<script type="text/x-handlebars" data-template-name="application">
<h1>ember-latest jsfiddle</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>Index Content:</h2>
{{#tool-tip view='sampleArray' content=content}}
<button>Sample Button (mouse over)</button>
{{/tool-tip}}
</script>
<style type="text/css">
html, body { font-family: 'HelveticaNeue' }
h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }
.tool-tip {
position: absolute;
display: none;
background: #888;
border-radius: 3px;
padding: 5px;
color: #fff;
}
.tool-tip-container {
position: relative;
}
.tool-tip-container:hover .tool-tip {
display: block;
}
</style>
<script type="text/javascript">
App = Ember.Application.create({});
App.IndexRoute = Ember.Route.extend({
model: function(){
return [
{firstName: 'Kris', lastName: 'Selden'},
{firstName: 'Luke', lastName: 'Melia'},
{firstName: 'Formerly Alex', lastName: 'Matchneer'}
];
}
});
App.SampleArrayView = Ember.View.extend({
template: Ember.Handlebars.compile("{{#each content}}<div>{{firstName}}</div>{{/each}}")
});
App.ToolTipComponent = Ember.Component.extend({
classNames: ['tool-tip-container'],
// when no view is supplied, this template is used and defaults to handling strings
// we could extend this to be smart and handle primitive arrays as well
defaultView: Ember.View.extend({
template: Ember.Handlebars.compile('{{this.content}}')
}),
template: Ember.Handlebars.compile('{{yield}}<div class="tool-tip">{{view _tooltipView}}</div>'),
view: null,
_tooltipView: null,
init: function() {
var view = this.get('defaultView');
// for simplicity we'll pass it as a string, but you should
// support passing a reference (just check the type of view)
if(!Ember.isEmpty(this.get('view'))) {
view = this.container.lookupFactory('view:' + this.get('view'));
}
this.set('_tooltipView', view);
this._super.apply(this, arguments);
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment