JQuery UI工具提示:每个工具提示有不同的图像
JQuery UI Tooltip: Have different image per tooltip
我是JavaScript的新手,所以如果这是一个愚蠢的问题,请原谅我。
我试图为每个工具提示显示不同的图像。JQuery UI已经设置好了,所以里面的文本就是图像的名称。
查看下面的代码:
HTML:
<div id="tooltip" class="option-child"><a id="ceramic-pro-rain" title="The Title" data-geo="Rochester" href="#" >• 1 layer of Rain on all windows and glass</a></div>
JavaScript
<script type="text/javascript">
$(function() {
$( document ).tooltip({
//items: "a, [data-geo], [title]",
items: "a",
position: {
my: "left center-29",
at: "right+10 center+18"
},
content: function() {
var element = $( this );
if ( element.is( "[data-geo]" ) ) {
var text = element.text();
return "<img class='map' alt='" + text +
"' src='http://www.sample.com/img/tooltip/" +
text + ".jpg" + "'>";
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
}
});
});
由于工具提示选择器是items: "a"
,所以永远不会执行以下语句。
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
解决方案:
如果要将工具提示添加到所有a
&带或不带[data-geo]
的img
标签尝试以下js。
$(document).tooltip({
items: "a,img",
position: {
my: "left center-29",
at: "right+10 center+18"
},
content: function() {
var element = $( this );
if(element.is( "[data-geo]" )){
return '<img class="map" alt="'+ $(this).data('geo') +'" src="http://lorempixel.com/image_output/'+ $(this).data('geo') +'.jpg" />';
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
}
});
我还添加了html来覆盖所有可能的变体。
<div id="tooltip" class="option-child">
<a id="ceramic-pro-rain" title="The Title" data-geo="Rochester" href="#" >• 1 layer of Rain on all windows and glass</a>
<img src="http://lorempixel.com/400/200/sports/" alt="sports image">
</div>
<a id="ceramic-pro-rain" title="The Title" href="#" >• Link without data-geo</a>
jsfiddle链接
相关文章:
- 如何在 javascript 替换新图像/标题后正确显示 css 工具提示
- jquery UI工具提示的自定义背景图像
- 如何在 D3 中创建工具提示,以便在图形中节点上的鼠标悬停上获取图像
- 如何通过 Jquery 工具提示显示图像
- 如何将文本框弹出窗口(Jquery 工具提示或类似工具)添加到画布中的 Fabric JS 图像
- 如何在图像库森时更改颜色和显示工具提示
- 当我们单击多个图像链接时,将在同一页面上显示多个工具提示
- 为什么我无法在引导工具提示中显示图像
- 悬停时无法显示图像按钮的工具提示项
- 在图像附近显示鼠标上的工具提示
- 鼠标悬停图像地图上的工具提示
- JQuery UI工具提示:每个工具提示有不同的图像
- 如何在MVC 4剃刀中动态调用图像上的工具提示
- 如何将引导工具提示与图像链接一起使用
- 单击图像时的工具提示
- 将鼠标悬停在图像的一部分上时的工具提示
- 图像地图中的纯CSS数据工具提示(jquery?)
- Highcharts工具提示图像
- Jquery工具提示图像高度&宽度
- 工具提示图像在细胞悬停,谷歌电子表格