View Full Version : Add Tooltip For SVG Sprite Behind Another Sprite

13 May 2013, 2:49 PM
Hi All,

An application I'm writing displays graphics using ExtJS Sprites. Multiple graphics can be selected by clicking-and-dragging over them. When the click-and-drag is performed, a semi-transparent rectangular selection box is drawn over them to show the user the selected area- pretty straightforward. The selection box itself is also an ExtJS Sprite.

I've added tooltips to the Sprites as follows:

sprite.on("render", function(me) {
var tip = Ext.create("Ext.tip.ToolTip", {
target: me.el,
html: me.tooltip

These tooltips work perfectly. The problem arises when I draw the selection box over the Sprites with tooltips. Mousing over the Sprites does not display the tooltips, since the selection box is drawn on top of them.

Is there any way to get the tooltips to display even when their Sprites are covered by the selection box? I can't simply add a tooltip to the selection box, since there could be multiple Sprites under the selection box with multiple different tooltips. Thanks!

13 May 2013, 3:21 PM
Solved this problem by setting the CSS property "pointer-events" of the selection box Sprite to "none". This essentially makes the selection sprite invisible to mouse events, so the mouseover events are fired by the sprites underneath it.

this.selectionSprite.on("render", function(sprite) {
sprite.setStyle("pointer-events", "none");