Minimal Alert/Confirm Dialog With Custom Tooltip - message.js

message.js is a small yet customizable jQuery plugin that enables you to display alert and confirmation messages in a custom popup box.

Also includes an option to attach a beautify custom tooltip to any element via data-tooltip attribute.

How to use it:

1. Load the jquery.message.js script after jQuery library and you're ready to go.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/modules/jquery.message.js"></script>

2. Create an alert popup, define the alert message, customize the OK button, and trigger a function when the user clicks the OK button.

$.message({
  content: "Alert Message",
  submit: "Confirm"
}, function () {
  // do something
});

3. Create a confirmation dialog, define the confirm title/message, customize the Confirm/Cancel buttons, and trigger functions when the user clicks the Confirm or Cancel button.

$.confirm({
  title: "Confirm Dialog",
  content: "Are You Sure?",
  submit: "Confirm",
  cancel: "Cancel"
}, function(){
  alert("submit");
}, function() {
  alert("cancel");
})

4. Attach a custom tooltip to your element.

<button data-tooltip="Tooltip Content Here">Hover Me</button>

$.tooltip({
  backgroundColor: "rgba(0, 0, 0, .8)",
  padding: "5px 10px",
  borderRadius: "8px",
  color: "#fff",
  maxWidth: "480px",
  // more styles here
});

5. Customize the styles of the alert dialog.

$.message({
  content: "Alert Message",
  submit: "Confirm",
  styles: {
    bg: {
      backgroundColor: "#eaeaea",
      position: "fixed",
      width: "100%",
      height: "100%"
    },
    wrap: {
      width: "200px",
      height: "100px",
      backgroundColor: "#fff",
      fontFamily: "Roboto Condensed",
      border: "#ccc",
      position: "absolute",
      left: "50%",
      top: "50%"
    },
    content: {
      padding: "10px 10px"
    },
    button: {
      padding: "8px",
      fontSize: "13px",
      textAlign: "center",
      border: "none",
      fontFamily: "Roboto Condensed",
      cursor: "pointer",
      outline: "none",
      position: "absolute",
      right: "10px"
    },
    buttonSubmit: {
      backgroundColor: "transparent",
      color: "#000"
    }
  }
});

6. Customize the styles of the confirm dialog.

$.confirm({
  title: "Confirm Dialog",
  content: "Are You Sure?",
  submit: "Confirm",
  cancel: "Cancel",
  styles: {
    bg: {
      backgroundColor: "#eaeaea",
      position: "fixed",
      width: "100%",
      height: "100%"
    },
    wrap: {
      width: "200px",
      height: "100px",
      backgroundColor: "#fff",
      fontFamily: "Roboto Condensed",
      border: "#ccc",
      position: "absolute",
      left: "50%",
      top: "50%"
    },
    content: {
      padding: "10px 10px"
    },
    title: {
      padding: "10px 10px",
      backgroundColor: "#39aeff",
      fontSize: "15px",
      color: "#fff"
    },
    button: {
      width: "50%",
      fontSize: "13px",
      padding: "10px 0",
      textAlign: "center",
      border: "none",
      fontFamily: "Roboto Condensed",
      color: "#fff",
      cursor: "pointer",
      outline: "none"
    },
    buttonSubmit: {
      backgroundColor: "#3296f4"
    },
    buttonCancel: {
      backgroundColor: "#838383"
    }
  }
});

---

This awesome jQuery plugin is developed by treadpit. For more Advanced Usages, please check the demo page or visit the official website.