How to put a <a> link inside a <span> that is in a <a>?

Here my code

  <a href="http://linkurl" class="link" title="sometitle">
 text link 

 <span class="hidden-tooltip-data" style="display: none;"> <a
 href="http://www.google.ca"> my link here destroy everything </a 
</span>
  </a>

I use Poshy here 开发者_如何学编程script

       $('.link').each(function() {
      var tooltip = $(".hidden-tooltip-data",this).html();
      $(this).attr("title","");
    $(this).poshytip({
    content: function(updateCallback) {
        return tooltip;
             }
         });
      });

Nested links are illegal. This case is explicitly mentioned in the HTML 4.01 Specification.

First of all you shouldn't be doing that. The reason resides in the fact that the child a is completely ignored because it's under the parent a.

I suggest you just making a span that contains two different a tags that contain as many span as required.

You should not put a link inside another link.

By default, Poshytip will read an element's title attribute and use that as the tooltip content. However, you want to include a link in the tip, and putting HTML in the title would look ugly if JavaScript is turned off (and be inaccessible).

Your best approach would be to include a text-only title for downlevel browsers and include the enhanced tip content in a data attribute (obvously escaping markup):

<a href="..." class="link" title="basic content" data-tip="enhanced content &lt;a href=&quot;...&quot;&gt;link&lt;/a&gt;">...</a>

$('.link').each(function() {
    $(this).attr('title','').poshytip({ content: $(this).data('tip') });
});

Including markup in an attribute like that obviously gets a little messy, so if your tips have a common format, it might be a better idea to include the URL as the data attribute and build the markup in script.

$('.link').each(function() {
    $(this).attr('title','').poshytip({ content: '<a href="' + $(this).data('tiplink') + '">link</a>' });
});