3

Look at this fiddle http://jsfiddle.net/52VtD/2635/

Inside it you can see one tooltip working.

Suppose we weren't looking at a fiddle though, and couldn't see the javascript source, but we wanted to know what was controlling this tooltip behavior?

The answer is 

$("#tooltip1").tooltip();

So how do we find that answer using chrome or firefox inspector, or some other debug/browser inspector stuff? Preferably it would be quick, as opposed to downloading all .js files and prettifying them in an IDE and then manually searching.

Gallaxhar
  • 976
  • 1
  • 15
  • 28

2 Answers2

1

In *Chrome** you can bring up the developer tools buy clicking f12 and on the right you should see a tab titled "Event Listeners". Here you should see the event listeners for the page your are on.

This should have all the Event Listener info you could ever want :)enter image description here

Jason Roell
  • 6,679
  • 4
  • 21
  • 28
1

There is no quick answer to this. You pretty much have to analyze a specific situation and see what clues you can then go look for.

In this particular case, you're going to suspect that there's an event listener attached to the #tooltip object. You can first look in the Chrome debugger for event listeners. Right click on the button, select Inspect Element, click on the Event Listeners tab and then look at the event listeners. In this particular case, you will see a bunch of them for that object. What you want is mouseout and mouseover. But, when you see where the event listeners are attached, it just take you to the internals of jQuery. This is a challenge with a library because it's the library that actually attached the event as part of some higher level API that the developer used.

So, now you know that jQuery was used to attach these events. You need to figure out where in the code these events where attached. To do this, you need to develop a theory about how the developer identified this particular object in jQuery. Since there is no particular structure to this simple document, the likely way that the developer found this particular object is with a "#tooltip" selector passed to some jQuery function. So, at this point, I would search all the JS in the page for "#tooltip" and see what you find.

While still in the Chrome debugger, you can hit Ctrl+F and enter #tooltip. Then, hit enter several times as it takes you to different uses of that and the third time, it will take you to:

$("#tooltip1").tooltip();

And, you will have your answer. Obviously, every problem like this is a bit different and it takes some detective work and searching to figure out what clues to search for in the Javascript. Some cases are much harder than others.

andand
  • 17,134
  • 11
  • 53
  • 79
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • correct, you actually tried it as I did rather than just spewing an answer that doesn't actually work for real world scenarios, thanks. – Gallaxhar Feb 09 '14 at 02:50
  • @Gallaxhar - I've added more to my answer to finish the solution. – jfriend00 Feb 09 '14 at 02:53
  • the only reason CTRL+F and enter #tooltip work in THIS SPECIFIC case is because it's a jsfiddle, and the source is actually printed in text on the page, in a real world scenario such as the bootstrap docs, the js event for the tooltip is buried in a minified docs js and it doesn't appear this easy to find with a simple search on the html page. – Gallaxhar Feb 09 '14 at 02:54
  • @Gallaxhar - yes, if you don't find it in the actual page source, then you will have to click on the various JS source files and search in those. But, it is usually relatively obvious which JS source files are libraries and which ones have custom code in them for this page so there's usually not a lot to search. It would be possible to implement a find that would find something in any resource used by the page, but I'm not aware of a tool that does that. – jfriend00 Feb 09 '14 at 02:56
  • http://getbootstrap.com/javascript/#tooltips try to find it for the "Four Directions" example, #tooltip returns nothing in a search, because they used data-toggles, searching for [data-toggle=tooltip] finds it in line 16 of getbootstrap.com/assets/js/docs.min.js , but there is no real way to know to search for [data-toggle=tooltip] unless you already know what you're doing, so it appears using this for learning is limited – Gallaxhar Feb 09 '14 at 03:00
  • "it would be possible to implement a find that would find something in any resource used by the page" ... chrome inspector already does this, but you can't use CTRL+F inside it, use this: http://i.imgur.com/HDtZRho.png – Gallaxhar Feb 09 '14 at 03:05
  • @Gallaxhar - it's a detective game. If you see `data-toggle="tooltip"` in the HTML, you've got to figure it's there for a reason so if the more obvious methods don't find it, then you might start to think that someone is using that. It's a process of elimination as there are a zillion ways for a piece of JS to find a particular HTML element or set of elements. You may also have to delve into how the particular library exposes an API for its function in order to know what method names to look for too. – jfriend00 Feb 09 '14 at 03:06