Mouseover event not firing correctly

Question

I am trying to display a tool-tip alert from a mouse over event on a button. however, what is happening is that the alert will only fire when I hover the mouse for the second time over the button. In other words I have to hover, leave then re-enter for the event to fire.

I would be grateful if someone could check my code to point out my mistake. Many thanks.

fiddle example

<script type="text/javascript">
  $(function() {
    $(document).on('mouseover', '#srcsubmit', function() {
      if ($("#srcsubmit").prop('disabled') == true) {
        $("#srcsubmit").css('cursor', 'help');
        $('#srcsubmit').tipso({
          position: 'right',
          titleContent: 'Search Button Disabled',
          content: 'This field cannot be modified',
          background: '#889eb0',
          titleBackground: '#63a9e4',
          color: 'white',
          width: 275,
          size: 'default'
        });
      } else {
        return false;
      }
    });
  });
</script>

html

<input type="text" class="srcBox" id="srcBox" name="srcBox" />
  <input type="button" class="srcsubmit btn-primary" id="srcsubmit" Value="Search" />
 <div class="srchBoxError"></div>
 <br />
 <br />
<input type="text" class="srcBoxRslt" id="srcBoxRslt" name="srcBoxRslt" />
 <input type="button" class="srcRslt btn-primary" id="srcRslt" Value="Return" />
  <div class="dstrBoxError"></div>

Answer 1

If you are working with firefox browser, you can use the mouse events even the elements are disabled. But it will not work with other browsers(specifically chrome).

Solution for your issue:

The problem is tipso plugin is defining on the first mouseover action only. And then for next mouseover only it is starts working. So you need to place the tipso code definition in the ready function itself.

Just place the tipso code definition outside the mouseover event like below code snippets.

Code snippets:

$(function() {
  $('#srcsubmit').tipso({
    position: 'right',
    titleContent: 'Search Button Disabled',
    content: 'This field cannot be modified',
    background: '#889eb0',
    titleBackground: '#63a9e4',
    color: 'white',
    width: 275,
    size: 'default'
  });
  $(document).on('mouseover', '#srcsubmit', function() {
    if ($("#srcsubmit").prop('disabled') == true) {
      $("#srcsubmit").css('cursor', 'help');
    } else {
      return false;
    }
  });
});

Fiddle DEMO

Hope this helps!

Answer 2

The fact that mouse event do not occur on disabled elements is the key issue.

So here is a tweaky walk-around.
You will use an absolutely positionned div (semi-transparent red in this demo... For you to see it) to place right over the disabled button. On that div, you will instantiate Tipso... Not on the button.

Now you only will have to show/hide that div while enabling/disabling the button. It only serves as a "mouse event zone" for Tipso.

Sounds good?

$(function() {
  
  // Get our 2 elements in variables to avoid useless lookups
  var srcsubmit = $("#srcsubmit");
  var srcsubmit_zone = $("#srcsubmit-zone");
  
  // Hide the "zone" if the button is NOT disabled
  if (!srcsubmit.prop('disabled')) {
    srcsubmit_zone.hide();
  }

  // Get the button dimentions and position
  var srcsubmitDimention = {
    height: srcsubmit.outerHeight(true),
    width: srcsubmit.outerWidth(true),
    top: srcsubmit.offset().top,
    left: srcsubmit.offset().left
  }
  
  // Place the "zone" div over the button
  srcsubmit_zone.css({
    "height":srcsubmitDimention.height,
    "width":srcsubmitDimention.width,
    "left": srcsubmitDimention.left,
    "top": srcsubmitDimention.top
  });
  
  // Instantiate Tipso normally
  srcsubmit_zone.tipso({
    position: 'right',
    titleContent: 'Search Button Disabled',
    content: 'This field cannot be modified',
    background: '#889eb0',
    titleBackground: '#63a9e4',
    color: 'white',
    width: 275,
    size: 'default'
  });
});

#srcsubmit-zone{
  display: inline-block;
  background-color: rgba(255,0,0,0.4);  /* Just for you to see it's over the button */
  position: absolute;
  cursor: help;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tipso/1.0.8/tipso.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tipso/1.0.8/tipso.min.js"></script>

<input type="text" class="srcBox" id="srcBox" name="srcBox" />
<input type="button" class="srcsubmit btn-primary" id="srcsubmit" Value="Search" disabled/>
<div id="srcsubmit-zone"></div>
<div class="srchBoxError"></div>
<br />
<br />
<input type="text" class="srcBoxRslt" id="srcBoxRslt" name="srcBoxRslt" />
<input type="button" class="srcRslt btn-primary" id="srcRslt" Value="Return" />
<div class="dstrBoxError"></div>