Rappid Fiddle Tooltips

HTML

<link rel="stylesheet" href="http://jointjs.com/css/joint.all.min.css">
<script src="http://jointjs.com/js/joint.all.min.js"></script>
<!-- Rappid Fiddle -->
<div id="paper">

</div>

CSS

#paper {
    display: inline-block;
    border: 1px solid gray;
}

JavaScript

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 600,
    height: 600,
    gridSize: 20,
    model: graph
});

joint.shapes.basic.CustomElement = joint.shapes.basic.Generic.extend({
    markup: '<g class="rotatable"><g class="scalable"><rect/><image/></g><text class="toplabel"/><text class="bottomlabel"/></g>',
    defaults: joint.util.deepSupplement({
        type: 'basic.CustomElement',
        attrs: {
            text: { fill: 'black' },
            '.toplabel': {
                text: 'the top lab...', // <-- truncated label
                'text-anchor': 'middle',
                ref: 'rect',
                'ref-x': 0.5,
                'ref-y': -20
            },
                'rect': {
                fill: 'red',
                stroke: 'black',
                    width: 100,
                    height: 100
                    
            }
        },
        tooltipContent: 'the top label' // <--- full-length label
    }, joint.shapes.basic.Generic.prototype.defaults)
});

var cell = new joint.shapes.basic.CustomElement({
    size: {
        width: 100,
        height: 100
    },
    position: {
        x: 100,
        y: 100
    }
});
cell.addTo(graph);

// tooltip instantiation
var tooltip = new joint.ui.Tooltip({
    className: 'tooltip small',
    target: $('[model-id="' + cell.id + '"] .toplabel')[0],
    content: cell.get('tooltipContent'),
    top: $('[model-id="' + cell.id + '"] .toplabel')[0],
    direction: 'top',
    padding: 15
});
tooltip.listenTo(cell, 'change:tooltipContent', function(cell, tooltipContent) {
    this.options.content = tooltipContent;
});

// changing the label
cell.attr('.toplabel/text', 'the new top ...');
cell.set('tooltipContent', 'the new top label');