Create a CSS popup alert that appears when a button is clicked, rather than using

Is there a way to customize CSS so that the popup alert focuses on a button instead of just appearing like this? https://i.sstatic.net/r25fd.jpg

I have implemented this type of validation for a text box:

<div class="form-group">
<label class="control-label col-sm-3" for="judul_laporan">Judul Laporan </label>
    <div class="col-sm-5">
         <input type="email" class="form-control" id="judul_laporan" >
     <span style="color: red" id="warnlaporan"></span>
    </div>
</div>

<button type="button" id="save_laporan"></button>

JQuery

 $("#save_laporan").click(function(){    
  var judul_laporan = $('input[name="judul_laporan"]'); 
  if(judul_laporan.val() == ''){
    judul_laporan.parent().parent().addClass('has-error');
    $('#warnlaporan').text("Judul Laporan Belum Ada");
    judul_laporan.focus();
    result
  }else{
    judul_laporan.parent().parent().removeClass('has-error');
     $('#warnlaporan').text("");
  }

However, I'm unsure how to create a button-like popup alert similar to the image provided.

javascriptjqueryhtmlcss

Answer №1

Check out the x3schools' documentation for a sample popup inside a div.

This code snippet demonstrates how to open a popup:

// Function to open the popup when user clicks on 'div'
function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}
/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Actual popup (displayed on top) */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Animation for fading in the popup */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
<div class="popup" onclick="myFunction()" style="left: 35px; top: 60px">Click me!
  <span class="popuptext" id="myPopup">Popup text...</span>
</div>

You can also utilize microtip, which is a straightforward library for creating popups. Simply use this declaration: 

<button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip">
. Just ensure to download the small package (only 1kb) with rpm on your server.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2 module transpilation services

In my angular 2 application, there is a module called common. Here is how the project structure looks like: main --app /common --config //.ts configs for modules --services //angular services --models --store //ngrx store /co ...

javascriptangulartypescriptgruntjs

Retrieving various checkbox values through Ajax

Having trouble retrieving multiple values from checkboxes using Ajax. I am able to get the value of one checkbox but unable to retrieve multiple values. <input name="p_flatform" class="p_flatform" type="checkbox" value="1">Iphone <input name="p_f ...

jqueryajaxcheckbox

Incorporating an HTTP header into d3.json using queue.js

I know that I can include a header in a D3 JSON request by using the following code: d3.json("http://localhost:8080/data") .header("Application-ID", "1") However, I'm uncertain about how to add this header when utilizing queue's defer method. ...

javascriptd3.jsqueue.js

Is there a way to swap out the original text with the ajax response text?

Upon receiving the ajax response, it replaces the initial text if the checkbox is ticked. How can I achieve the opposite? Revert back to the original text when the user unticks the checkbox? $.ajax({ type: 'POST', url: 'index.php?r=re ...

jqueryajax

Sliding Up Transition Effect for Footer with JQuery or CSS3

I am attempting to replicate a sleek slide up footer that caught my eye on The Internship Movie Site. I have created the wireframe layout, but I am struggling to figure out the correct CSS transition effect. Although I have experimented with the "top" and ...

jqueryhtmlcss

Avoid triggering the API with rapid successive clicks

My project involves creating an Instagram-clone with like and dislike buttons. When a user is logged in and hasn't liked or disliked a post yet, both buttons appear as black. If the user likes a post, the like button turns blue, and if they click disl ...

javascriptreactjsexpressreduxsequelize.js

Translate unknown provider in Angular using $translateProvider

Here is the situation I am facing: I am working on an Ionic project and I want to implement internationalization using angular-translate. To achieve this, I have added angular-translate.min.js to my project: <script src="lib/ionic/js/ionic.bundle.js"&g ...

javascriptangularjsionic-frameworkangular-translate

Align columns to the right and left using Bootstrap

It should be simple enough, but I can't seem to find my mistake. Goal: The entire markup should be centered with a width of col-10. Within the same 10-column width, there should be two divs each taking up 50% of the space. Using Bootstrap 5, for so ...

htmlcsstwitter-bootstrapbootstrap-5

Manipulate the visibility of a child element's dom-if based on a property retrieved from the parent element

Exploring the world of Polymer, I am eager to tackle the following scenario... I have a binding variable called {{readonly}} that sends data from a parent Dom-HTML to a child Dom-HTML in my Polymer project. The code excerpt looks something like this... C ...

javascriptangularjsnode.jspolymerloopback

Is it detrimental to have lengthy jQuery chains?

After extensively utilizing jQuery for quite some time, I recently developed a slideshow plugin for my professional projects. Interestingly, without fully intending to, approximately 75% of the code was written in a single chain. Despite being meticulous ...

javascriptjqueryperformanceplugins

What is causing .attr('title') to retrieve the title of the element before?

UPDATE Flexslider now includes several callback spaces for use, making this functionality possible. after: function(){}, //Callback: function(slider) - Fires after each slider animation completes Thank you to everyone who contributed! LIVE CO ...

javascriptjqueryhtmlflexslider

React - Updating state from an external component

I realize that the question I am about to ask may go against some basic principles of using React... however, with this example, I hope someone can assist me in finding a solution to the problem I am currently facing. While this code snippet is not from m ...

javascriptreactjscomponents

Collapsing one tab when another is selected in the accordion interface

I have successfully implemented an accordion feature, but I am facing an issue where the tabs do not close when another one is clicked. Currently, they only open but fail to close the previously opened tab... Below is the code snippet for reference: < ...

jqueryhtmlaccordion

Tips for fixing the issue of "module ./response not found" in Node.js Express

Whenever I execute the command $ npm start this error message appears > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8feefcfce6e8e1e2eae1fbbccfbea1bfa1bf">[email protected]</a> start > nodemon server.js ...

javascriptnode.jsexpressresponsenode-modules

Table cell featuring a status menu created with Material UI DataGrid

I'm looking to include a column called "Filled Status." Although I've checked the documentation, I can't quite figure out how to do it. It seems like I may need to use renderCell when setting up the column, but I'm not sure how to make ...

javascriptnode.jsreactjsmaterial-uijsx

Is there a method to implement colorPicker in an Angular WYSIWYG directive without utilizing jQuery?

After removing the jQuery reference, the color picker is no longer functioning in the WYSIWYG directive. In my project, I am avoiding the use of jQuery, so is there a way to achieve this without using jQuery? Alternatively, are there any other editors av ...

javascriptangularjsangularjs-directivewysiwygcontenteditable

Enable Class exclusively on upward scrolling on the browser

Is there a way to dynamically change the class of an element only when the user scrolls the browser page upwards? Issue Filide>> JavaScript $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll <= 100) { ...

javascriptjqueryscrollscrollbar

Creating a shadow effect within an element: a step-by-step guide

I've been experimenting with creating an inner shadow effect on an image, but I can only seem to achieve an outer shadow. Just for clarification, .showSlide is a div element. .showSlide { display: block; width:100%; height:350px; } .showSlide img { ...

htmlcss

Updating a Div with XML data through JQuery

Hey everyone, I have a simple question that I need help with... Currently, I am using jQuery to retrieve an XML document in the following format: $.ajax({ type: verb, url: url, dataType: datatype, success: callback }) } After receiving t ...

jqueryxml

JavaScript: Toggle between 2 functions using a single click event listener

I am facing an issue with coding a Sidebar that features an animated Burger Menu Button named "navicon1". The Menu Button utilizes the "open" class to create a cool animation effect. Moreover, I aim to have the functions "openNav" and "closeNav" toggled wh ...

javascriptfunctionmenutogglesidebar