jqueryで使えるtooptip関数を作りました


 

alertは、確認に1クリック必要なので、クリック無しで使えるものとして作りました。

使い方
jqueryを使える環境で、
tooltip(“好きなメッセージ”);
とするだけで使えます。
表示位置やデザインの変更などご自由に。

function tooltip(text) {
  var message = $("<div>" + text + "</div>");
  message.css({
    "position": "fixed",
    "top": "10px",
    "left": "50%",
    "transform": "translateX(-50%)",
    "padding": "10px 20px",
    "font-size": "16px",
    "background-color": "rgba(0, 0, 0, 0.8)",
    "color": "#fff",
    "border-radius": "4px"
  });
  $("body").append(message);
  setTimeout(function () {
    message.fadeOut(500, function () {
      message.remove();
    });
  }, 2000);
}

WEBプログム、WEBデザインなどの制作については、以下を御覧ください。

WEBプログム、WEBデザインなどの制作