column data in tooltip overflows

I want to show the data in the tooltip when a columns has long sentences because of width constrints.

For this I am 开发者_如何学编程using a renderer function as follows

{
    header: xppo.st('SDE_INCIDENT_DESCRIPTION1'),
    width: 175,
    sortable: true,
    groupable: false,
    dataIndex: 'IncidentDescription',

    renderer: function(value, metaData, record, rowIndex, columnIndex, ds) {

        return '<div ext:qtip="' + value + '">' + value + '</div>';

    }
},

But when the data has no break space and when the word is really long the text will extend beyond the text area.

How do I show the entire data within the div specified without overflowing from it.

Ext.apply(Ext.QuickTips.getQuickTip(), {
     maxWidth: 700,
     minWidth: 100,
     showDelay: 50,
     trackMouse: true
 });