Thank you for providing resources for the approach followed and a reproduction Dojo snippet.
The first issue is due to a missing style, which is present in the How To article and not present in the Dojo snippet with grid:
As the show event is triggered when the tooltip is shown, we are using CSS to show it, if the text content is other than "". But we need to make the tooltip hidden initially using the rule above and then show it on show event. Otherwise, it appears empty initially. After the initial empty showing, there is no such issue, because we set visibility hidden on handling the hide event.
As far as the second issue is concerned, it seems caused by having sorting: true applied to the Grid, which additionally changes the results returned for element.offsetWidth
. The third issue is reproducible on my side in IE, but not in Chrome.
Having in mind issues 2 and 3, they are connected with the complexity of determining if an element has ellipsis applied or not. There are numerous solutions in forums, dealing with this matter. The one solution, which is used in or tooltip sample, is not a silver bullet for all complex scenarios possible. I have prepared a Dojo snippet
for you, following the approach given in this StackOverflow thread
. This approach shows tooltip even for cells with text on multiple lines (which is noted as a drawback in the forum thread), but it is the most reliable cross browser approach to determine if a tooltip is needed or not for Grid headers and cells.