Improving Tooltips with json data

Question

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.

Johntron · Accepted Answer · 2013-05-15 05:52:55Z

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

Stack Exchange Network

Improving Tooltips with json data

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Improving Tooltips with json data

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions