3
\$\begingroup\$

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.

\$\endgroup\$
2
\$\begingroup\$
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

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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