patternjavascriptMinor
Improving Tooltips with json data
Viewed 0 times
withjsontooltipsdataimproving
Problem
This is a working example that I am trying to improve.
Throughout the application I am working on one of the requirements was to have tooltips everywhere. However the customer wanted the ability to see a "Summary" of these tooltips and be able to manage them from a single location.
What I ended up doing is creating a new class called FormatToolTip.js
I wanted everything to be based off a class I assign to the element. Here is an example of the format I used.
From there it can be initialized.
```
$(document).ready(function () {
$('.withToolTip').tooltip();
var toolTip;
toolTip = new FormatToolTip();
function init(){
$('.withToolTip').each(function(){
var toolTipData;
toolTipData = toolTip.buildToolTip($(this).attr('helpid'));
$(this).attr('data-original-title',toolTipData);
});
}
Throughout the application I am working on one of the requirements was to have tooltips everywhere. However the customer wanted the ability to see a "Summary" of these tooltips and be able to manage them from a single location.
What I ended up doing is creating a new class called FormatToolTip.js
function FormatToolTip() {
var self = this;
amplify.request.define("toolTipListing", "ajax", {
url: "resources/prototype/tooltips.json",
dataType: "json",
type: "GET"
});
self.ToolTipId = "ToolTipId";
self.allToolTips = "ToolTips";
self.init = function () {
amplify.request({
resourceId: "toolTipListing",
success: function (data) {
amplify.store(self.allToolTips, data.toolTips);
},
error: function () {
}
});
};
self.buildToolTip = function (helpId) {
var toolTipList = amplify.store(self.allToolTips);
for (var i = 0; i < toolTipList.length; i++) {
var val = toolTipList[i];
if (helpId == val.id) {
text = val.text;
return text;
}
}
return amplify.store(self.ToolTipId);
};
self.setToolTipId = function (toolTipId) {
if (toolTipId != undefined || toolTipId != null) {
amplify.store(self.ToolTipId, toolTipId);
}
};
self.init();
}I wanted everything to be based off a class I assign to the element. Here is an example of the format I used.
From there it can be initialized.
```
$(document).ready(function () {
$('.withToolTip').tooltip();
var toolTip;
toolTip = new FormatToolTip();
function init(){
$('.withToolTip').each(function(){
var toolTipData;
toolTipData = toolTip.buildToolTip($(this).attr('helpid'));
$(this).attr('data-original-title',toolTipData);
});
}
Solution
function FormatToolTip() {
"use strict";
amplify.request.define("listTooltips", "ajax", {
url: "resources/prototype/tooltips.json",
dataType: "json",
type: "GET"
});
amplify.request({
resourceId: "listTooltips",
success: function (data) {
amplify.store('tooltips', data.toolTips);
}
});
// Get the tooltip from storage, given it's id
this.buildToolTip = function (id) {
var tips = amplify.store('tooltips');
for (var i = 0, len = tips.length; i < len; i++) {
var val = tips[i];
if (id == val.id) {
return val.text;
}
}
// This doesn't appear to be used?
//return amplify.store(this.ToolTipId);
};
// Don't think this is used either
/*
this.setToolTipId = function (toolTipId) {
if (toolTipId != undefined || toolTipId != null) {
amplify.store(this.ToolTipId, toolTipId);
}
};
*/
}Just use a data attribute in your markup: ``
And initialize like so:
$(document).ready(function () {
var tips = $('[data-tip-id]');
var toolTip = new FormatToolTip();
tips.each(function(){
var this = $(this);
var data = toolTip.buildToolTip(this.attr('data-tip-id'));
this.attr('title',data) // Set the title so .tooltip() works
.tooltip();
});
});
* Untested
Code Snippets
function FormatToolTip() {
"use strict";
amplify.request.define("listTooltips", "ajax", {
url: "resources/prototype/tooltips.json",
dataType: "json",
type: "GET"
});
amplify.request({
resourceId: "listTooltips",
success: function (data) {
amplify.store('tooltips', data.toolTips);
}
});
// Get the tooltip from storage, given it's id
this.buildToolTip = function (id) {
var tips = amplify.store('tooltips');
for (var i = 0, len = tips.length; i < len; i++) {
var val = tips[i];
if (id == val.id) {
return val.text;
}
}
// This doesn't appear to be used?
//return amplify.store(this.ToolTipId);
};
// Don't think this is used either
/*
this.setToolTipId = function (toolTipId) {
if (toolTipId != undefined || toolTipId != null) {
amplify.store(this.ToolTipId, toolTipId);
}
};
*/
}<script type="text/javascript">
$(document).ready(function () {
var tips = $('[data-tip-id]');
var toolTip = new FormatToolTip();
tips.each(function(){
var this = $(this);
var data = toolTip.buildToolTip(this.attr('data-tip-id'));
this.attr('title',data) // Set the title so .tooltip() works
.tooltip();
});
});
</script>Context
StackExchange Code Review Q#19458, answer score: 2
Revisions (0)
No revisions yet.