2

I'm trying to show a popup element when user places a mouse over an other element:

<!DOCTYPE HTML>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function() {
        $('#base').hover(
          function handleIn(e) {
            var popup = $('<img/>', {
              id: 'popup',
              src: 'http://placehold.it/32x32'
            });
            popup.css({
              'position': 'absolute',
              'z-index': 300,
              'left': e.pageX - 30,
              'top': e.pageY - 30
            });
            popup.mouseover(function() {
              console.log('mouseover');
            });
            popup.mouseout(function() {
              console.log('mouseout');
            });
            $('#base').append(popup);
          },
          function handleOut() {

          }
        );
      });
    </script>
  </head>
  <body>
    <img id="base" src="http://placehold.it/256x256">
  </body>
</html>

Why doesn't the popup element show up? It is added to DOM, but I don't see it.

What am I doing wrong? How can I fix it?

FrozenHeart
  • 19,844
  • 33
  • 126
  • 242
  • Please read the [`.hover()` docs](https://api.jquery.com/hover/) to understand how do you should do it.. **Hint:** replace `function handleIn(e) {` to `function(e) {` – Mosh Feu Feb 10 '16 at 11:50
  • 1
    @Mosh Feu "replace function handleIn(e) { to function(e) {" -- for what? – FrozenHeart Feb 10 '16 at 11:55
  • Wrapping `#base` to the `div` tag helps, but I don't really understand why. Is it somehow related to the fact that `img` tag doesn't have a closing tag? – FrozenHeart Feb 10 '16 at 11:56

2 Answers2

2

You can't append a child to an <img/> element. See here

Try append it to the parent

$(function() {
        $('#base').hover(
          function handleIn(e) {
            console.log("asd");
            var popup = $('<img/>', {
              id: 'popup',
              src: 'http://placehold.it/32x32'
            });
            popup.css({
              'position': 'absolute',
              'z-index': 300,
              'left': e.pageX - 30,
              'top': e.pageY - 30
            });
            popup.mouseover(function() {
              console.log('mouseover');
            });
            popup.mouseout(function() {
              console.log('mouseout');
            });
            $('#base').parent().append(popup);
          },
          function handleOut() {

          }
        );
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="base" src="http://placehold.it/256x256">

By the way, that way you will have a new element on every hover event.

jolmos
  • 1,565
  • 13
  • 25
  • How can I decide whether I can append child elements to the certain tag? – FrozenHeart Feb 10 '16 at 12:01
  • 1
    'A void element is an element whose content model never allows it to have contents under any circumstances.' from here: https://www.w3.org/TR/html-markup/syntax.html#void-element . So the list are: `area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr` – jolmos Feb 10 '16 at 12:05
  • Thanks for the answer. Could you help me with the following question btw -- http://stackoverflow.com/questions/35315030/how-to-intercept-mouseout-event-for-the-top-level-tag-only – FrozenHeart Feb 10 '16 at 12:16
0

Try with this tooltip example:

<html>

<head>
  <link href="Styles/bootstrap.min.css" rel="stylesheet" />

</head>

<body>

  <img src="images/yourimage.jpg" class='test' data-toggle='tooltip' data-placement='right' title='your custom message' />

  <script src="Scripts/jquery-2.1.3.min.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>

  <script>
    $(document).ready(function() {
      $('[data-toggle="tooltip"]').tooltip();

    });
  </script>
</body>

</html>
Code
  • 1
  • 1