Home / Questions / 11536
Accepted
Marc Lemien
Asked: 2020-06-02 00:00:58 +0800 CST 2020-06-02 00:00:58 +0800 CST

How to create mini window event in onmouseover

  • 772

I have a button on a restaurant website, and I would like that when the mouse is over the button, a mini window appears where this appears: ( https://es.theysay.me/ranking/111/ ) I think with an event maybe onmouseover could do it, does anyone know what code would be the best? I need something that is with very little code if possible, because of how I have made the web. Thanks.

I clarify that this website is made in Adobe Muse . So the answer I need is a script or something with little code that I can copy as an html object on top of the image.

enter image description here

I can insert HTML code to the image that I want. In this case the Gastroranking button is an image and I want that small popup to appear when I mouse over it. I don't want it to be clickable or anything, just show the true ranking. Since now the little round button that appears is me putting it there, it doesn't actually show the truth in real time.

javascript

2 Answers

  1. Best Answer

    Through css styles you can show the element when hovering over the button as I put in the example.

    I also include javascript code that would allow loading, using jQuery, an external content in the popup element. In the Stack Overflow environment it will not work for you because they do not allow it for security reasons, but you should be able to do it on your website.

    $(function(){
  $('.popup').load('https://es.theysay.me/ranking/111/');
});
    .popup{
  display: none;
  width: 150px;
  height: 100px;
  background-color: yellow;
}
.popup-button:hover .popup{
  display: block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup-button">
  <button>Mostrar</button>
  <div class="popup">Contenido del popup</div>
</div>

    • 3

  2. Don't you already use any javascript pack like jquery ui or bootstrap?

    with bootstrap you have the popover with this documentation you could launch it on hover

    Popover reference with Bootstrap

    I hope I can help you.

    • 0