Get Element and ID, if any on mouseover with jQuery

Question

I am attempting to give my admins a mouseover of the element they are hovering over to give them a clue to what to edit, if anything. Here is my code:

$(document).tooltip();
$(document).on('mouseover','*',function(){
  $(this).attr('title',$(this).prop('id'));
  console.log($(this));
}).on('mouseout',function(){
  $(this).attr('title','');
});

This works great for elements with an id. What I need to get is a combination of html element and id (if any) on mouseover.

Not clear. On mouseover, you're setting the title of the element. But what should happen when there is no id? — asprin, Nov 16 '16 at 04:26
what I am trying to get is the element (body,div,span, etc.) it will be helpful, but not necessary to have an id on the element — richardwhitney, Nov 16 '16 at 04:27
i think you want to get the element type name. If so then you can use code like `$(this).prop('nodeName')` — vijayP, Nov 16 '16 at 04:29

score 1 · Answer 1 · answered Nov 16 '16 at 04:29

1

If I understood you correctly, when you hover over an element, you want the id of the element as well as the element type (tag name). If that's the case, then you can use the following:

 $(document).on('mouseover','*',function(){
      var id = this.id;
      var elementType = $(this).prop('nodeName'); // will give you element tag name
      // do something with id and elementType
    }).on('mouseout',function(){
      $(this).attr('title','');
    });

answered Nov 16 '16 at 04:29

asprin

9,579
12
66
119

thanks to you guys I now know that there actually were other posts that ask the same question. Should I delete my post? – richardwhitney Nov 16 '16 at 04:31
@phpmydev You don't need to delete the post. If you accept the duplicate question, your question can serve as a signpost for others looking for the same answer. – 4castle Nov 16 '16 at 04:34

score 0 · Answer 2 · answered Nov 16 '16 at 04:31

You should be able to short that code using this.id instead of $(this)... Also check your console and pick w/e you need from there and use || operator to pick the one that suits you best.

$(document).on('mouseover','*',function(){
  $(this).attr('title',(this.id || some_other_things || yet_another_one));
  console.log($(this));
  console.log(this);
}).on('mouseout',function(){
  $(this).attr('title','');
});

score 0 · Answer 3 · answered Nov 16 '16 at 04:33

0

If id is not defined then get the tagName property of the dom element.

$(this).attr('title', this.id || this.tagName);

answered Nov 16 '16 at 04:33

Pranav C Balan

113,687
23
165
188

Get Element and ID, if any on mouseover with jQuery

3 Answers3