Twitter Bootstrap popover and Farbtastic colorpicker

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://mattfarina.github.com/farbtastic/farbtastic.js"></script>
<div id="body" style="text-align:center;">
    <input type="text" rel="colorpicker" data-tool="first" />
   
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://mattfarina.github.com/farbtastic/farbtastic.css');

JavaScript

$(document).ready(function() {
    $("input[rel=colorpicker]").each(function(i, input) {
        $this = $(input);
        return $this.popover({
            title: "Colorpicker <i class='icon-remove pull-right'></i>",
            trigger: "click",
            placement: "bottom",
            html: true,
            content: "<div id='colorpicker-" + $this.data("tool") + "'>"
            + "<div class='color-picker'></div>"
            + "</div>"
        }).on("click", function() {
            $this = $(this);
            $target = $("#colorpicker-" + $this.data("tool"));
            $target.find(".color-picker").farbtastic(function(color) {
                $this.val(color).css("background-color", color);
            });
        });
    });

});