我不熟悉编程和英语。
我正在使用 CSS 显示带有动态内容加载的 tooltip
。
问题是,
我正在使用 JQuery
将包含 html 元素标签的值动态推送到数据信息属性。它以字符串形式存储,在 tooltip
上显示时,它以 html 标记作为字符串显示。
是否有任何可能的方法来显示带有格式化为 HTML 的值的工具提示
。
我正在尝试使用以下代码:
var divContent ;
$(document).ready(function(){
function getContent(){
var divAry = [];
var str;
divAry.push("<li>ABC</li>");
divAry.push("<li>DEF</li>");
str = "<ul>"+divAry.toString().replace(/,<li>/g,"<li>").replace(/,/g,"")+"</ul>";
return str;
}
$('#linkId').mouseover(function(){
divContent = getContent();
var jObj = $($.parseHTML(divContent));
$(this).attr('data-info',divContent);
});
});
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: grey;
border-radius: 5px;
color: #000;
content: attr(data-info);
top: 26px;
left: 40%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
top : 10px;
bottom: 100%;
content: "";
left: 50%;
position: absolute;
z-index: 99;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid grey;
border-left: 10px solid transparent;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<a id="linkId" href="#" class="tooltip">Hover here</a>
请任何人帮我摆脱这个。
提前致谢。
最佳答案
这里有一个使用 jQuery 创建 tooltips
消息的简单想法。
$(document).ready(function() {
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX - 8;
var tooltipY = event.pageY + 8;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
var showTooltip = function(event) {
$('div.tooltip').remove();
$('<div class="tooltip"> <li>ABC</li> <li>DEF</li></div>')
.appendTo('body');
changeTooltipPosition(event);
};
var hideTooltip = function() {
$('div.tooltip').remove();
};
$("span#hint,label#username'").bind({
mousemove : changeTooltipPosition,
mouseenter : showTooltip,
mouseleave: hideTooltip
});
});
#hint{
cursor:pointer;
}
.tooltip{
margin:8px;
padding:8px;
background-color:grey;
position: absolute;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<h3>Stackoverflow jQuery Tooltips Example</h3>
<span id="hint">Hover me</span>
关于jquery - 如何将数据属性字符串值转换为html元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34782694/