Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Stopping event propagation for Tipped.delegate

Is it possible to stop event propagation if I use Tipped.delegate for stacked elements? I'm using Tipped.delegate on a parent and child elements and they both do different things. It would be great if I had access to the event object in the afterUpdate callback (or some other appropriate callback) to stop the execution of the parent tip when I click on a child element. Is this possible? How would you go about this?

I suppose I could use Tipped.create with my own events, but it would be ideal if I can just use the built in delegate method.

Comments

  • Okay. Any suggest to help with this scenario?

  • I think I may have figured a solution with Tipped.delegate. If I disable caching I can return; in the function(element) {} if the other tip is already open. But if you have a better suggestion without disabling caching please let me know.
  • There's also Tipped.disable/enable, that could be a different way to handle it.
  • I think I figured out a solution for now. Do you have any plans to expose the event object for the delegate method?

    Also, I am not seeing any shadows on any of my tips. Even for very simple examples.
    Tipped.delegate('.tip',{
    maxWidth: 500,
    radius: false,
    showDelay: 500
    });

    I also do not see shadows on the examples on your site. http://www.tippedjs.com/

    I have added my own custom styles to fix this, but I don't want to break anything...
    .tpd-content-wrapper {
    overflow: visible;
    }
    .tpd-content-spacer {
    box-shadow: 10px 10px 2px rgba(50,50,50,0.3);
    }
  • edited December 2015
    I don't plan to expose events, if you'd like to stop propagation on one or more events you could bind to those events outside of Tipped:
    Tipped.delegate('.tip', 'test', { showOn: 'mousemove' });
    $('.tip').on('mousemove', function(event) {
    event.stopPropagation();
    });

    $('body').on('mousemove', function(event) {
    console.log('mousemove on body ' + event.pageX + ' ' + event.pageY);
    });
    There's a shadow defined on most skins in tipped.css, it's just very subtle. Use that if you want to tweak things:

    .tpd-skin-light .tpd-background-shadow { box-shadow: 0 0 8px rgba(0,0,0,.15); }

    The default (dark) skin has no shadow, but you can add it the same way.
Sign In or Register to comment.