0

On mouse over I have 2 tooltips displayed (on 1st mouseover only the top one is shown, on any following mouseover 2 tooltips are shown - see picture):

$('.pic').on('mouseover touchstart', '.pin', function(e) {
    $(this).attr('title', pin.text()).tooltip();
    $(this).tooltip('show');
});

$('.pic').on('mouseout', '.pin', function(e) {
    $(this).tooltip('hide');
});

[SOLVED]

$(this).tooltip('destroy');

did the trick!

linuxoid
  • 1,415
  • 3
  • 14
  • 32
  • where is the picture? – Yousaf Hassan Jun 20 '18 at 09:38
  • can't attach it, the site hangs for a minute every time I try to attach it – linuxoid Jun 20 '18 at 09:41
  • 1
    It's because you're creating another tooltip within the `mouseover touchstart` event handler. – Rory McCrossan Jun 20 '18 at 09:43
  • this site won't upload the picture. well, it's basically a tooltip on top of the .pin and another box to the right of it. I've changed mouseover for mouseenter and it still shows 2 tooltips – linuxoid Jun 20 '18 at 09:45
  • 1
    If it is necessary to create the tooltip on mouseover... You should "dispose" (destroy) it on mouseout. See this other [answer](https://stackoverflow.com/a/28220763/2159528). – Louys Patrice Bessette Jun 20 '18 at 09:51
  • 1
    I guess the problem was Concrete5 uses Bootstrap3 while I was trying to dispose it which is from Bootstrap4. As soon as I changed the 'hide' for 'destroy', it got fixed and only shows a single tooltip. It works with 'mouseover'. Thank you! – linuxoid Jun 20 '18 at 09:57
  • Why wouldn't the site upload pictures? – linuxoid Jun 20 '18 at 09:58

0 Answers0