PDA

View Full Version : Tooltip always shows a box around my elements



srp
1 Jun 2011, 10:52 AM
I've googled for this and searched the forums, but I either missed it or no one has run in to this before. I'm trying to use the tooltip with custom html for the contents. I have the html working the way I want, but extJS always seems to put a panel around my contents, which I understand, but I would like for the panel to not take up any extra space. Basically there is a small 2-5 pixel box around the html elements I have. I've tried setting padding: 0 but that didn't work and unstyled: true sort of works, but I don't want all the CSS styles removed from it since there is a bunch of stuff inherited. It seems like there should be a simple way of doing this, but I can't seem to figure it out.

Any help would be greatly appreciated.

Thanks.

Test code below.


var htmlString = '<div style="border: 1px solid grey;width:100%;">' +
'<div style="border-bottom: 1px solid grey;background-color: #ffffff; ">' +
'<table>';

var hoursTotal = 0;
var amountTotal = 0;
for (var j = 0; j < 2; j++) {
htmlString += '<tr><td style="padding:0px 5px 0px 0px;">' + j + ': </td> <td style="padding:0px 5px 0px 0px;">' + j + '</td> <td>' + j + "</td></tr>";
}
htmlString += '<tr><td style="padding:0px 5px 0px 0px;"><b>' + 'total:' + '</b></td> <td style="padding:0px 5px 0px 0px;"><b>' + j + '</b></td> <td><b>' + j + "</b></td></tr>";
htmlString += '</table>' +
'</div>';
htmlString += '<div>' +
'<b>Comment: </b></br>' + ("testing" || "")
'</div>' +
'</div>';
var tt = new Ext.ToolTip({
target: cmp.btnEl,
html: htmlString,
layout: 'fit',
padding: 0,
trackMouse: true
});