Javascript-форум - ToolTip не работает если на кнопке установлен disabled

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - ToolTip не работает если на кнопке установлен disabled (https://javascript.ru/forum/misc/76286-tooltip-ne-rabotaet-esli-na-knopke-ustanovlen-disabled.html)

ToolTip не работает если на кнопке установлен disabled

Здравствуйте уважаемые друзья!
Захотел поставить к себе на сайт tooltip, нашел, он работает.
Но когда на кнопке "<button>" установлен атрибут disabled то tooltip не срабатывает.

Почему на кнопке установлен disabled.
Кнопка "купить" если пользователь не выбрал опции "цвет, размер" то на кнопке стоит disabled и удаляется как только пользователь выбрал опции...

Вот сам скрипт который отвечает за tooltip

(function($) {
  $.fn.tool = function(options) {
    var defaults = {
      xOffset: 10,
      yOffset: 25,
      tooltipId: "tool",
      clickRemove: false,
      content: "",
      useElement: ""
    };
    var options = $.extend(defaults, options);
    var content;
    this.each(function() {
      var title = $(this).attr("title");
      $(this).hover(function(e) {
          content = (options.content != "") ? options.content : title;
          content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
          $(this).attr("title", "");
          if (content != "" && content != undefined) {
            $("body").append("<div id='" + options.tooltipId + "'>" + content + "</div>");
            $("#" + options.tooltipId)
              .css("position", "absolute")
              .css("top", (e.pageY - options.yOffset) + "px")
              .css("left", (e.pageX + options.xOffset) + "px")
              .css("display", "none")
              .fadeIn("fast")
          }
        },
        function() {
          $("#" + options.tooltipId).remove();
          $(this).attr("title", title);
        });
      $(this).mousemove(function(e) {
        $("#" + options.tooltipId)
          .css("top", (e.pageY - options.yOffset) + "px")
          .css("left", (e.pageX + options.xOffset) + "px")
      });
      if (options.clickRemove) {
        $(this).mousedown(function(e) {
          $("#" + options.tooltipId).remove();
          $(this).attr("title", title);
        });
      }
    });

  };
})(jQuery);

jQuery(document).ready(function($) {
  $("button").tool();
})

Можно как-то заставить скрипт работать когда на кнопке стоит disabled??
Заранее спасибо!

Цитата:

Сообщение от рони (Сообщение 500920)

Alexprom,
https://www.codeseek.co/preview/mLYWKq

Я наверное не понял, что вы имеете ввиду.
Ваш способ, просто меняет цвет кнопки, а где title??

Alexprom,
по ссылке хак, в результате которого на button disabled, можно повесить hover();
смотрите закладки там html и css, и сделайте также

Цитата:

Сообщение от рони (Сообщение 500928)

Взял ваш хак, скопировал на страницу js, css и html
и не работает, как вставлять - знаю...

button disabled event

Alexprom,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
button {
  position: relative;
  margin: 20px;
}
button .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
(function($) {
  $.fn.tool = function(options) {
    var defaults = {
      xOffset: 10,
      yOffset: 25,
      tooltipId: "tool",
      clickRemove: false,
      content: "",
      useElement: ""
    };
    var options = $.extend(defaults, options);
    var content;
    this.each(function(i) {
      var title = $(this).attr("title");
      $(this).hover(function(e) { console.log("hover")
          content = (options.content != "") ? options.content : title;
          content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
          $(this).attr("title", "");
          if (content != "" && content != undefined) {
            $("body").append("<div id='" + options.tooltipId + "'>" + content + "</div>");
            $("#" + options.tooltipId)
              .css("position", "absolute")
              .css("top", (e.pageY - options.yOffset) + "px")
              .css("left", (e.pageX + options.xOffset) + "px")
              .css("display", "none")
              .fadeIn("fast")
          }
        },
        function() {
          $("#" + options.tooltipId).remove();
          $(this).attr("title", title);
        });
      $(this).mousemove(function(e) {
        $("#" + options.tooltipId)
          .css("top", (e.pageY - options.yOffset) + "px")
          .css("left", (e.pageX + options.xOffset) + "px")
      });
      if (options.clickRemove) {
        $(this).mousedown(function(e) {
          $("#" + options.tooltipId).remove();
          $(this).attr("title", title);
        });
      }
    });

  };
})(jQuery);

jQuery(document).ready(function($) {
  $(".title").tool();
})

  </script>
</head>

<body>
<button disabled="disabled" ><div class="overlay title" title="disabled"></div>001</button>
<button title="work" class="title">002</button>
</body>
</html>

рони,
Большое вам спасибо!) Все работает замечательно! Хорошего вам дня!)