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

Question

我是编程和英语的新手。

我正在使用CSS显示tooltip动态内容加载。

问题是，

我正在使用JQuery动态地将包含html元素标签的值推送到data-info属性。它存储为字符串，在tooltip上显示时，它以html标签显示为字符串。

是否有任何可能的方法来显示tooltip格式为HTML的值。

我尝试使用以下代码：

＆＃13;

＆＃13;

 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);
          });
    
       });

＆＃13;

.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;
}

＆＃13;

 <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>

<a id="linkId" href="#" class="tooltip">Hover here</a>

＆＃13;

＆＃13;

＆＃13;

请有人让我摆脱这个。

提前致谢。

Answer 1

这是一个使用jQuery创建tooltips消息的简单想法。

＆＃13;

＆＃13;

$(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
	});
});

＆＃13;

	#hint{
		cursor:pointer;
	}
	 .tooltip{
		margin:8px;
		padding:8px;
		background-color:grey;
		position: absolute;
		z-index: 2;
	}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;