Форум

Alexprom · #1 (**permalink**) 22.12.2018, 15:40

Здравствуйте уважаемые друзья!
Захотел поставить к себе на сайт 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??
Заранее спасибо!

рони · #2 (**permalink**) 22.12.2018, 17:45

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

Alexprom · #3 (**permalink**) 22.12.2018, 18:03

Сообщение от рони

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

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

рони · #4 (**permalink**) 22.12.2018, 18:40

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

Alexprom · #5 (**permalink**) 22.12.2018, 18:53

Сообщение от рони

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

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

рони · #6 (**permalink**) 22.12.2018, 18:58

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>

Alexprom · #7 (**permalink**) 22.12.2018, 20:21

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

Форум

Справочник

Discord чат

Курсы javascript