Visual commenting on layout

Many designers are familiar with comments in Photoshop layouts.



The designer drew a mock-up, “stuck” sticky leaflets with comments, and with a calm soul transferred the models to the coder, reducing these personal comments to a minimum the number of personal conversations (in the key “this should be so”, “this should be this way”) with the latter.
')
Layout designer imposes. During this process, he accumulates comments for the programmer to his layout.

There are 2 ways to send these comments:

1. “Poke a finger” and tell what, where, when and why
2. leave comments in the code

The first method is quite visual, but it takes time both. The second eliminates some of these personal conversations, but the clarity of such comments leaves much to be desired.

Photoshop sticky leaflets relieve the designer of such “finger-pointing”. In the same way you can get rid of this process and coder.

That's why I wrote a small function BuildTip (the name is stupid, I know, just the first thing that came to mind).

I do not pretend to the originality of the ideas and solutions, but did not stumble upon anything like that. If there are such tools, I will be glad to links.

How to use

We need jQuery and BuildTip itself.

  <script type = "text / javascript" src = "jquery.min.js"> </ script>
 <script type = "text / javascript" src = "buildtip / buildtip.js"> </ script>

The path to the folder with BuildTip `by default is set as buildTipPath = 'buildtip'. If necessary, you can change it:

 <script type = "text / javascript">
 buildTipPath = '/ js / buildtip';
 </ script>

It remains to "stick" sticky leaves. To do this, in the code directly into the block (tag) to which this "leaf" refers, leave a comment in this format:

  <! - {BuildTip: comment} -> 

At the exit we get “sticky leaves”, stuck to the blocks. When you hover on the “leaf” the block to which the comment belongs is highlighted, when clicked, the comment itself opens.



As soon as there is no need for these comments, simply disable buildtip.js

Demonstration
Archive with BuildTip

Since it was written for itself and in haste, it was checked in what we use in our work: the latest versions of Safari, Firefox, Opera

UPD. at the request of kurbik added an option, when turned on, the signs are closed when you mouseout

Included as follows:

  builtTipSettings.closeOnLeave = true;