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
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.
<a class="withToolTip" helpid='1010' href="#" data-placement="right"></a>
From there it can be initialized.
<script type="text/javascript">
$(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);
});
}
init()
});
</script>
To polish off the look and feel I added some CSS and a background image for the element.
.withToolTip{
background-image:url("images/help.png");
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
padding-left: 10px;
}
I am looking to improve on my code. So suggestions would be awesome.