tutut
v1.0.1
Published
Tutut is a JavaScript library used to create simple popup alerts.
Maintainers
rakhmadiReadme
Tutut ( create simple popup alerts)
Tutut is a JavaScript library used to create simple popup alerts.
✨Purpose
- Notify the user
- Display a confirmation message before an important action
- Create a more engaging UI than the browser's default
alert() - Lightweight
- No dependencies
- Simple API
How to Use
//Basic example
Tutut.success({
title : "Title",
text : "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
})
// alert type available
Tutut.info({}) //for alert type info
Tutut.success({}) //for alert type success
Tutut.warning({}) //for alert type warning
Tutut.danger({}) //for alert type danger
Tutut.confirm({}) //for alert type confirm
Tutut.delete({}) //for alert type delete
Tutut.question({}) //for alert type question
how to use with cdn
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tutut@latest/style.min.css">
</head>
<body>
<!-- Yout More code --->
<script type="module">
import Tutut from 'https://cdn.jsdelivr.net/npm/tutut@latest/dist/index.min.js'
window.Tutut = Tutut
</script>
<script>
window.onload = ()=>{
Tutut.success({
title : "Message",
text : "Content Message"
})
}
</script>
</body>
</html>How to use it modularly
npm i tututimport 'tutut/style.css'
import Tutut from 'tutut'
Tutut.success({
title : "Message",
text : "Content Message"
})
Tutut with Option Property
// Tutut.success({message},{option})
Tutut.success({title : "lorem ipsum",text : "sit amet"},{overlayClose : false})
// it's means open alert with title "lorem ipsum" body text "sit amet" with overlay option Close falseTutut Callback Type Confirm
Tutut will display the "cancel and confirm" buttons in the Tutut warning, danger, and confirmation message types, "cancel and delete" in the delete message type, and "ok" in the info, success, and question message types.
example to show cancel and confirm button
Tutut.delete({
title : "lorem ipsum",
text : "sit amet"
},{showConfirm : true})example to show cancel and confirm button with callback
// This only applies to warning, danger, confirm and delete message types.
Tutut.delete({
title : "lorem ipsum",
text : "sit amet"
},{
showConfirm : true,
onConfirm : ()=>{ alert("Confirm Success") },
onCancel : ()=>{ alert("Cancel Success") }
})example to show cancel and confirm button with callback with message success
// This only applies to warning, danger, confirm and delete message types.
Tutut.delete({
title : "Message",
text : "Are you sure you want to delete this data?"
},{
showConfirm : true,
onConfirm : ()=>{
let deleted = true
if(deleted){
Tutut.success({
title : "Message",
text : "Deleted Success"
})
}
},
onCancel : ()=>{ alert("Cancel Success") }
})example to show ok button with callback
// This only applies to info, success and question message types.
Tutut.info({
title : "lorem ipsum",
text : "sit amet"
},{
showConfirm : true,
onOk : ()=>{ alert("Ok Success") },
})Tutut Message Property
| name property | purpose | type | | ------------- | -------------------- | ------ | | title | title message | string | | text | content text message | string |
Tutut Option Property
| name property | purpose | type | | ------------------- | -------------------------- | ----------------------- | | showCloseButton | display show close button | boolean (true | false) | | showConfirm | display the confirm button | boolean (true | false) | | overlayClose | enable exit with overlay | boolean (true | false) | | onConfirm | callback confirm button | function | | onCancel | callback cancel button | function | | onOke | callback ok button | function |