动态生成 jQuery 工具提示未显示
Generate jQuery Tooltip dynamically not showing
我们的想法是创建一个图像列表,每个图像都有一个包含更大图像的自定义工具提示。
这是一个部分 "works" 的示例(工具提示出现在悬停时但添加了 128px 图像,为什么?
http://jsfiddle.net/xpvt214o/157904/
for(idx = 0; idx < 2; idx++){
var tmpImg = $('<img>')
.attr('src', 'https://www.seoclerk.com/pics/551103-1TOqFD1502285018.jpg')
.attr('id', idx)
.attr('title', '')
.width('32px')
.height('32px');
var tmpDivCard = $('<div>')
.css('position', 'absolute')
.css('left', 40*idx)
.css('top', 50)
.css('zIndex', '1')
.append(tmpImg);
tmpImg.tooltip({ content: '<img src="https://www.seoclerk.com/pics/551103-1TOqFD1502285018.jpg" style="width:128px;height:128px;"/>' });
$('#map_area').append(tmpDivCard);
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<div style="">
<div id="map_area">
</div>
</div>
我的问题是下面的代码根本不显示工具提示,尽管图像在那里。
document.addEventListener('DOMContentLoaded', setProfileCards);
function setProfileCards() {
//debugger;
var profileCards = (@Html.Raw(Session["profileCards"] as string));
profileCards.forEach(function (profileCard) {
var areaName = profileCard.Place.replace(/\./g, '');
var _elementArea = $("area[id='" + areaName + "']");
var _elementHTML = $("area[id='" + areaName + "']")[0];
if (profileCard.Place.startsWith('3.1')) {
//
var tmpImg = $('<img title="">')
.addClass('rounded-circle')
.attr('src', profileCard.ProfilePic)
//.attr('id', areaName)
//.attr('alt', '')
//.attr('title', profileCard.Name)
.attr('title', '')
.width('32px')
.height('32px');
tmpImg.click(function (e) {
_elementArea.trigger('click');
});
var left = (parseInt(_elementHTML.coords.split(',')[2]) + parseInt(_elementHTML.coords.split(',')[0])) / 2;
var top = (parseInt(_elementHTML.coords.split(',')[3]) + parseInt(_elementHTML.coords.split(',')[1])) / 2;
var tmpDivCard = $('<div>')
.css('position', 'absolute')
.css('left', left)
.css('top', parseInt(_elementHTML.coords.split(',')[3]))
.css('zIndex', '1')
.append(tmpImg);
tmpImg.tooltip({ content: '<img src="' + profileCard.ProfilePic + '" style="width:128px;height:128px;"/>' });
$('#map_area').append(tmpDivCard);
}
});
}
主要问题是。您需要包含 jquery-ui
中的 css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
我看到你设置了图像的样式 style="width:128px;height:128px;"
?
查看 fiddle http://jsfiddle.net/xpvt214o/158120/
我们的想法是创建一个图像列表,每个图像都有一个包含更大图像的自定义工具提示。 这是一个部分 "works" 的示例(工具提示出现在悬停时但添加了 128px 图像,为什么?
http://jsfiddle.net/xpvt214o/157904/
for(idx = 0; idx < 2; idx++){
var tmpImg = $('<img>')
.attr('src', 'https://www.seoclerk.com/pics/551103-1TOqFD1502285018.jpg')
.attr('id', idx)
.attr('title', '')
.width('32px')
.height('32px');
var tmpDivCard = $('<div>')
.css('position', 'absolute')
.css('left', 40*idx)
.css('top', 50)
.css('zIndex', '1')
.append(tmpImg);
tmpImg.tooltip({ content: '<img src="https://www.seoclerk.com/pics/551103-1TOqFD1502285018.jpg" style="width:128px;height:128px;"/>' });
$('#map_area').append(tmpDivCard);
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<div style="">
<div id="map_area">
</div>
</div>
我的问题是下面的代码根本不显示工具提示,尽管图像在那里。
document.addEventListener('DOMContentLoaded', setProfileCards);
function setProfileCards() {
//debugger;
var profileCards = (@Html.Raw(Session["profileCards"] as string));
profileCards.forEach(function (profileCard) {
var areaName = profileCard.Place.replace(/\./g, '');
var _elementArea = $("area[id='" + areaName + "']");
var _elementHTML = $("area[id='" + areaName + "']")[0];
if (profileCard.Place.startsWith('3.1')) {
//
var tmpImg = $('<img title="">')
.addClass('rounded-circle')
.attr('src', profileCard.ProfilePic)
//.attr('id', areaName)
//.attr('alt', '')
//.attr('title', profileCard.Name)
.attr('title', '')
.width('32px')
.height('32px');
tmpImg.click(function (e) {
_elementArea.trigger('click');
});
var left = (parseInt(_elementHTML.coords.split(',')[2]) + parseInt(_elementHTML.coords.split(',')[0])) / 2;
var top = (parseInt(_elementHTML.coords.split(',')[3]) + parseInt(_elementHTML.coords.split(',')[1])) / 2;
var tmpDivCard = $('<div>')
.css('position', 'absolute')
.css('left', left)
.css('top', parseInt(_elementHTML.coords.split(',')[3]))
.css('zIndex', '1')
.append(tmpImg);
tmpImg.tooltip({ content: '<img src="' + profileCard.ProfilePic + '" style="width:128px;height:128px;"/>' });
$('#map_area').append(tmpDivCard);
}
});
}
主要问题是。您需要包含 jquery-ui
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
我看到你设置了图像的样式 style="width:128px;height:128px;"
?
查看 fiddle http://jsfiddle.net/xpvt214o/158120/