Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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.

share|improve this question

1 Answer 1

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: <a href="#" data-tip-id='1010' data-placement="right"></a>

And initialize like so:

<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>

* Untested

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.