hoDiOcLetohxfjgr
New Member
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\[code\]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; 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();}\[/code\]I wanted everything to be based off a class I assign to the element. Here is an example of the format I used. \[code\]<a class="withToolTip" helpid='1010' href="http://stackoverflow.com/questions/13800813/#" data-placement="right"></a>\[/code\]From there it can be initialized. \[code\] <script type="text/javascript"> $(document).ready(function () { $('.withToolTip').tooltip(); var toolTip; toolTip = new FormatToolTip(); function init(){ $('.withToolTip').each(function(){ var toolTipData; toolTipData = http://stackoverflow.com/questions/13800813/toolTip.buildToolTip($(this).attr('helpid')); $(this).attr('data-original-title',toolTipData); }); } init() }); </script>\[/code\]To polish off the look and feel I added some CSS and a background image for the element.\[code\].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;}\[/code\]I am looking to improve on my code. So suggestions would be awesome.