问题描述
我有一个可点击的面板,其中有一个工具提示。代码如下所示:
< 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 =tooltiptitle =Verified Venue>已验证的< / A>< / H5>
< / div>
< / div>
< / a>
< script>
$(document).ready(function(){
$('[data-toggle =tooltip]')。tooltip();
});
< / script>
当我将鼠标悬停在工具提示文本上时,它工作正常。与主链接< a href =/ venues / manage />
有关的工具提示有些问题。当我点击图片时,链接工作正常。当我点击文本 Venue Title
时,它可以正常工作。但是,如果我点击< div class =col-md-4>
中的其他任何地方(例如文本的右侧),链接不会工作。
是否有可能在另一个< a>内有一个
?< a>
工具提示;
为了嵌套a,请做以下更改....
您必须将嵌套的a封装在对象
标记中。
< 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>场地标题< / b>
< object>< a href =#data-toggle =tooltiptitle =Verified Venue>已验证< / a>< / object>
< / h5>
< / div>
< / div>
< / a>
这是一个bootply(参见生成的HTML):
这是来自维塔利弗里德曼:
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>
?
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
这篇关于href里面href的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!