0

I have a disable button on witch i want to put an effect when the mouse pass hover it so for doing that i have this code :

$commentAddTimeshitForbiden = AddPopupJQ("Button disable");
echo "<input type='button' value='Validate' $commentAddTimeshitForbiden/>";

AddPopupJQ is just a function who allow to add a class to my input and a title follow the text give in parameter.

function AddPopupJQ($text='', $title='')
{
   return "class='popupjq' data-popupjq_text='" . htmlspecialchars(stripslashes($text), ENT_QUOTES | ENT_HTML401, "ISO-8859-15") . "' data-popupjq_title='" . htmlspecialchars(stripslashes($title), ENT_QUOTES | ENT_HTML401, "ISO-8859-15") . "'";
}

After i have a jquery function who will take all the elements who have the className and print a popUp when the mouse pass hover the element.

function popupJQ() {
   $(".popupjq").each(function(index) {
      //Récuperation des données/paramètres
      var title = ($(this).data('popupjq_title')) ? $(this).data('popupjq_title') : '';
      var text = ($(this).data('popupjq_text')) ? $(this).data('popupjq_text') : '';
      //Pour l'accessibilité, on ajoute la balise Alt aux images
      if ($(this).is("img")) {
         var sep = (title && text) ? " : " : "";
         $(this).attr("alt", title + sep + text);
      }
      //Création de la tooltip
      var txt = "";
      if (title)
         txt += "<B><FONT class='tooltitle'>" + title + "</FONT></B><br>";
      if (text)
         txt += "<FONT class='tooltext'>" + text + "</FONT>";
      if(txt){
         $(this).tooltipster({
             content: $(txt),
             position: 'bottom-left',
             delay: 100,
             debug: false,
             speed: 0
         });
      }
   });   
}

The problem is that it's work when the button is enable but not when it's disable. I think it's because the event hover is stop when the button is disable. How can i do for make it work.

Kvasir
  • 1,197
  • 4
  • 17
  • 31

2 Answers2

0

Can you update your code to achieve it using css, as follows:

<html>
<head>
    <style>
        input:hover:disabled {
            background-color: red;
        }
    </style>

</head>

<body>
    <input type="button" value="Disabled" disabled/>    
    <input type="button" value="Enabled"/>  
</body>
Phoenix
  • 335
  • 2
  • 9
  • Hummm yea but it's not what i want i want to print a pop up but it's fine the link of allu explain it really good. – Kvasir Apr 21 '15 at 09:47
0

you can try below code.

$('.className').on('mouseenter',function(e){
   callMyFunction();
});
nirmal
  • 2,143
  • 1
  • 19
  • 29