jquery - 如何将数据属性字符串值转换为html元素？

Question

我不熟悉编程和英语。

我正在使用 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>

请任何人帮我摆脱这个。

提前致谢。

Answer 1

这里有一个使用 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>