I would like to display a text description box when I hover over the button and close it when not hovered. At the moment, when my button is hovered the text box displays, however I need to click off the screen to close it. When I try to use several buttons to show different message boxes, all the modals are opened and I need to click the screen many times to close it. How can I show the message box on hover and undisplay when the mouse is not hovered over. How can this be achieve for multiple buttons?
Below is what i have so far:
$(document).ready(function () {
"use strict";
$("#test1").hover(
function () {
$('.modal').modal({
show: true
});
},
function () {
$('.modal').modal('hide');
});
});<link rel="stylesheet" href=".3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src=".3.1/jquery.min.js"></script>
<script src=".3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src=".js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src=".3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<button class="btn login btn-primary" data-toggle="modal" data-target="#product1" id="test1">Test</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This text box shown when mouse hover over the button
</div>
</div>
</div>I would like to display a text description box when I hover over the button and close it when not hovered. At the moment, when my button is hovered the text box displays, however I need to click off the screen to close it. When I try to use several buttons to show different message boxes, all the modals are opened and I need to click the screen many times to close it. How can I show the message box on hover and undisplay when the mouse is not hovered over. How can this be achieve for multiple buttons?
Below is what i have so far:
$(document).ready(function () {
"use strict";
$("#test1").hover(
function () {
$('.modal').modal({
show: true
});
},
function () {
$('.modal').modal('hide');
});
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<button class="btn login btn-primary" data-toggle="modal" data-target="#product1" id="test1">Test</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This text box shown when mouse hover over the button
</div>
</div>
</div>3 Answers
Reset to default 2First major problem: when bootstrap displays this modal, it overwrites everything on the web page, including the Test button, which makes it out of reach of a mouseOut (the bottom of the modal dialog is over the button )
This is solved by bidding on the order of the display layers by placing a larger z-index css (I put 8000 and this also works only if the element uses a positioning) As a result, this is no longer a true modal dialog, and the click on the Test button can be triggered, which is contrary to the spirit of using a modal dialog.
the BS4 doc on the subject => https://getbootstrap./docs/4.0/ponents/modal/#via-data-attributes
$(document).ready(function () {
"use strict";
$(".BtModals").hover(
function () {
let refID = '#' + $(this).data('modal_id');
$(refID).modal('show');
},
function () {
let refID = '#' + $(this).data('modal_id');
$(refID).modal('hide');
});
});.BtModals:hover {
position:relative;
z-index: 8000;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery./jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<button class="btn login btn-primary BtModals" data-modal_id="Modal-t1" data-toggle="modal" data-target="#product1" >Test 1</button>
<button class="btn login btn-primary BtModals" data-modal_id="Modal-t2" data-toggle="modal" data-target="#product1" >Test 2</button>
<div id="Modal-t1" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This text box shown when mouse hover over the button Test 1
</div>
</div>
</div>
<div id="Modal-t2" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This text box shown when mouse hover over the button Test 2
</div>
</div>
</div>New Answer:
"hover" method accepts second argument as handlerOut.
So you can do something like this:
$(document).ready(function () {
"use strict";
$("#test1").hover(
function () {
$('.modal').modal({
show: true
});
},
function () {
$('.modal').modal('hide');
});
});
Old Answer:
Since you use bootstrap, for such cases, you can use popover.
https://getbootstrap./docs/3.3/javascript/#popovers-examples
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
You can achieve it with CSS by setting a data attribute with the 'hover text' in the HTML for each button. If there are too many buttons to do it manually, or if they change dynamically, you can loop over them in JS and use .setAttribute("data-tip", "tip_content").
Here is an example of the HMTL and CSS:
<button data-tip="Show this on hover">My botton</button>
button:hover:after {
content: attr(data-tip);
color: red;
display: block;
position: absolute;
top: 20%;
}
Here is the codepen link if you want to see it live: https://codepen.io/CPC464/pen/KEbJJo