hopscotch and iframes

[ltulib]

We have a webservice with same domain iframes and we have the tour script and hopscotch source code in the top document.

These are the iframes:

<button id="startTourBtn" onClick="hopscotch.startTour(tour);" class="btn btn-large btn-primary">Take a tour</button>
	<div class="wrapper">
		<div class="container_left" id="resizable">	
			<div class="container_publications">	
				<iframe name="list_publications" id="list_publications" marginwidth="0" allowtransparency="true" frameBorder="0" scrolling="yes"></iframe>
				<iframe name="media_timeline" id="media_timeline" marginwidth="0" allowtransparency="true" frameBorder="0" scrolling="no"></iframe>
			</div>
		</div>
		<div class="container_right">		
			<div class="container_read_media">
				<iframe name="flip_publication" id="flip_publication" allowfullscreen marginwidth="0" frameBorder="0" allow="encrypted-media" scrolling="yes">
			</div>
		</div>
	</div>

Please let us know how to write the tour to reference elements in the iframes. Here are some examples of what we've done so far - none of the tries have been working:

var tour = {
  id: "introduction_tour",
	showPrevButton: true,
	showNextButton: true,
  steps: [
	{
	  title: "Guided tour",
	  content: "This starts a guided tour of the application.",
	  target: "startTourBtn",
	  placement: "bottom"
	},
	{
	  title: "Searching the system",
	  content: "This is where you enter a search",
	  target: "q",
	  placement: "bottom"
	},
	{
	  title: "The publications",
	  content: "Here are the publications. Click on the thumbnail to read/watch/listen. Click on text under thumbnail to read publication data.",
	  target: "$('#list_publications').contents().find('.article-container')",
	  placement: "right"
	}
  ]
};

Thanks for any help!!