How to create mini window event in onmouseover

Question

How to create mini window event in onmouseover

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I have a button on a website of a restaurant, and I would like that when the mouse over the button comes out a mini window where this appears: ( link ) I think that with an onmouseover event maybe I could do it, does anyone know which code would be the best? I need something that is with very little code if possible, for 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.

I can insert HTML code to the image I want. In this case, the Gastroranking button is an image and I want that small popup to appear when the mouse passes over it. I do not want it to be clickable or anything like that, just show the true ranking. Since now the redondito button that appears is me that I have put it there, it does not really show the truth in real time.

javascript html

asked by Marc Lemien 01.06.2016 в 10:00

source

2 answers

0

Do not you already use a javascript pack like jquery ui or bootstrap?

with bootstrap you have the popover with this documentation you could throw it when the mouse passes

Reference popover with Bootstrap

I hope I can help you.

answered by 01.06.2016 в 10:29

ERROR: Call to a member function fetch_assoc () on a non-object in Inject a service or factory into a controller in angular.js

score 2 · Accepted Answer

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

I also include javascript code that would allow loading, using jQuery, external content in the popup element. In the environment of Stack Overflow it will not work 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>