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!!