CODEWITHSUNDEEP
htmlcssbutton
Paul Davis
Paul Davis

Reputation: 525

Making a clickable div overlay a button

I have a pretty familiar bootstrap modal with the submit button on the left of the close button in the footer. But I am disabling the submit button for a particular invalid form filling, but I am thinking of doing one of a few things - making the button appear enabled so that people can click it and the error will pop-up in a tooltip. Or, I will leave the button with its familiar disabled appearance but if someone clicks it, it will show them the tooltip. Either way I need the div to over the top of the submit button no matter the circumstance:

#clickable {
  position: absolute;
  width: 55px;
  height: 25px;
  background-color: pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal-footer">
  <div id="clickable"></div>
  <button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>&#x2713; Submit</button>
  <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>

(I just made it pink so I can see where it is landing). Currently this goes over the close button and not the submit button. Any ideas how to get it to fit snuggly over the submit button?

Upvotes: 1

Views: 978

Answers (1)

sjahan
sjahan

Reputation: 5940

I'm not sure I got your point. If you just want to hide the button, you can use a pseudo element.

Why not using a pseudo-element?

Basically, you use position: relative inside your button to make it a new space reference. It will be use as a reference for the pseudo-element which is inside, and you strech it with top/bottom/left/right: 0, and that's it. No need to add some DOM just for styling purpose.

.btn-submit:disabled {
  position: relative;
}

.btn-submit:disabled::after {
  background-color: pink;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0; 
}
<div class="modal-footer">
  <button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>&#x2713; Submit</button>
  <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>

If you want it to be the tooltip, you'll have to wrap both the tooltip and the button:

.tooltip-container {
  display: inline-block;
  position: relative;
}

.tooltip {
  background-color: pink;
  position: absolute;
  left: 0;
  top: 0; 
  width: 55px; //Note that fixing size is probably a bad idea.
  height: 25px;
}
<div class="modal-footer">
  <div class="tooltip-container">
    <div class="tooltip">This is the tooltip.</div>
    <button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>&#x2713; Submit</button>
  </div>
  <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>

Upvotes: 1

Related Questions