HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Improving Tooltips with json data

Submitted by: @import:stackexchange-codereview··
0
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

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.