href inside href [duplicate]

Question

I have a clickable panel within which I have a tooltip. The code looks as follows:

<a href="/venues/manage/">
 <div class="col-md-4">
    <div class="panel panel-default">
     <img src="/img/venue.svg">
     <h5 class="text-vert crop"><b>Venue Title</b><a href="#" data-toggle="tooltip" title="Verified Venue">Verified</a></h5>
    </div>
 </div>
</a>
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>

When I hover over the tooltip text it works fine. Something about the tooltips messes with the main link <a href="/venues/manage/">. When I click the image, the link works fine. When I click the text Venue Title it works fine. But if I click anywhere else in the <div class="col-md-4"> (such as to the right of the text) the link doesn't work.

Is it possible to have a <a> tooltip within another <a>?

Answer 1

In order to have nested a please do the following changes ....

You have to wrap the nested a inside a object tag.

<a href="/venues/manage/">
 <div class="col-md-4">
    <div class="panel panel-default">
     <img src="/img/venue.svg">
     <h5 class="text-vert crop">
         <b>Venue Title</b>
         <object><a href="#" data-toggle="tooltip" title="Verified Venue">Verified</a></object>
     </h5>
    </div>
 </div>
</a>

Here is a bootply (see the generated HTML) : http://www.bootply.com/MmYwCLTF0P

Here is a conference from Vitaly Friedman : https://vimeo.com/162334949