Renderer onclick/tooltip alignment to content margin

[sreedParticipant]

Hello,
I am using a renderer for a column header, which displays the content fine using margins or padding for positioning.
The problem is, when hovering over the content the tooltip or onclick event does not adjust to the margins I have set for the content.
It seems that hovering or onclick events are outside the margins set for the content and located in a default area of upper left corner of the column header.

Am I missing a simple html style that will align the tooltip and onclick to the margins set for the content?

renderer: function (text, align, height) {
return ““;
}

[sreedParticipant]

I removed the html img < > so you can see the style values:

return “img title=’Create’ src=’doc_plus.png’ style=’vertical-align: top; width: 20px; margin: 14px; margin-top: 5px; margin-bottom: 3px;’ onClick=’alert(0)'”

[sreedParticipant]

text: ‘Image’, dataField: ‘ID’, cellsrenderer: imagerenderer, sortable: false, filterable: false, menu: false, width: ’50’, align: ‘center’, cellsalign: ‘center’, renderer: function (text, align, height) {
return “img title=’Create’ src=’doc_plus.png’ style=’vertical-align: top; width: 20px; margin: 14px; margin-top: 5px; margin-bottom: 3px;’ onClick=’alert(0)'”
}

[sreedParticipant]

one workaround was to increase the width: ’50’ of the column.

[Author]

Posts