Dynamic Tooltip Generator

In this project I've taken my first shot at OO JavaScript, and I'm not sure how it turned out. The script dynamically makes a tooltip with different text if you so choose. As of now it takes a lot to create the tooltip and show it, is there a way to make this smaller?

Here is the code at JSFiddle. Let me know if it would be easier to paste in here.

```
/global window, document/

var note;

function Note() {
'use strict';

this.identifier = 0;
}

Note.prototype.makeWrap = function () {
'use strict';
var wrap;

wrap = document.createElement('div');
wrap.id = 'wrap' + this.identifier;

wrap.style.border = '1px solid #43484A';
wrap.style.boxShadow = '-1px -1px 5px #292929, 1px 1px 5px #292929';
wrap.style.height = '185px';
wrap.style.opacity = '.95';
wrap.style.position = 'absolute';
wrap.style.width = '300px';

return wrap;
};

Note.prototype.makeHead = function () {
'use strict';
var head;

head = document.createElement('div');
head.id = 'head' + this.identifier;

head.style.backgroundColor = '#43484A';
head.style.color = '#EEEEEE';
head.style.height = '30px';
head.style.paddingLeft = '6px';
head.style.position = 'relative';
head.style.width = '294px';

return head;
};

Note.prototype.makeTitle = function (text) {
'use strict';
var title;

title = document.createElement('div');
title.id = 'title' + this.identifier;

title.style.backgroundColor = 'inherit';
title.style.color = 'inherit';
title.style.float = 'left';
title.style.fontFamily = 'Georgia, "Times New Roman", serif';
title.style.height = '17px';
title.style.paddingTop = '6px';
title.style.paddingBottom = '7px';
title.style.position = 'relative';
title.style.width = '80%';

title.innerHTML = text;

return title;
};

Note.prototype.makeMini = fun

Woahhhh, that is a LOT of repetition. You have a lot of similar functionality, all your functions do basically the same stuff:

• Create an element

• Set the ID

• Apply styles

• Maybe do something else

You should look into DRYing your code by:

• Factoring out often used features into helper functions

• Adjusting structure of the code in order to allow for more of the above

• Go back to 1 and repeat until it's no longer feasible

As a quick start I refactored and dryed your code quite a bit, I left out re-adding all the styling stuff, but it should give you a pretty good idea on how to structure your code.

/*global window, document*/

// Let's use an anonymous wrapper
(function() {
    'use strict'; // only one pragma needed

    // You are using alot of .style assignments... let's create a helper
    function css(elem, styles) {

        for(var i in styles) {
            if (styles.hasOwnProperty(i)) {
                elem.styles[i] = styles[i];
            }
        }

    }

    // You are also creating a lot of similiar elements, so will use another wrapper
    function element(type, id, styles) {

        var elem = document.createElement(type);
        elem.id = id;
        css(elem, styles);

        return elem;

    }

    function Note() {
        this.identifier = 0;
    }

    // Prototype is just an object, let's get rid of all those assignments
    Note.prototype = {

        create: function (titleText, bodyText) {

            'use strict';
            var wrap, head, title, mini, close, body, foot;

            wrap  = this.element('div', 'wrap', {

                border: '1px solid #43484A',
                boxShadow: '-1px -1px 5px #292929, 1px 1px 5px #292929',
                height: '185px',
                opacity: '.95',
                position: 'absolute',
                width: '300px',

            });

            // etc....

            this.identifier++;

        },

        element: function(type, name, styles) {
            return element(type, name + this.identifier, styles));
        }

    }

    window.Note = Note; // expose the local stuff to the window

});

note = new Note();
note.create(
    'Lorem',
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu orci nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis posuere rutrum pellentesque.'
);

Also have a look at JavaScript Design Patterns book by O'Reilly.

PS: I'd further suggest that you move out your CSS into actually CSS class declarations and use those on your elements.

StackExchange Code Review Q#4437, answer score: 8