如何將數據屬性字符串值轉換爲html元素？

Question

我是新來的編程和英語語言。

我正在努力通過使用CSS顯示動態內容加載tooltip。

的問題是，

我推包含HTML元素標籤的數據信息動態屬性使用JQuery值。它以字符串的形式存儲，並在tooltip上顯示時以html標籤顯示爲字符串。

是否有任何可能的方式顯示格式爲HTML的值爲tooltip。

我用下面的嘗試是代碼：

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() { 
 
\t 
 
\t var changeTooltipPosition = function(event) { 
 
\t var tooltipX = event.pageX - 8; 
 
\t var tooltipY = event.pageY + 8; 
 
\t $('div.tooltip').css({top: tooltipY, left: tooltipX}); 
 
\t }; 
 

 
\t var showTooltip = function(event) { 
 
\t $('div.tooltip').remove(); 
 
\t $('<div class="tooltip"> <li>ABC</li> <li>DEF</li></div>') 
 
      .appendTo('body'); 
 
\t changeTooltipPosition(event); 
 
\t }; 
 

 
\t var hideTooltip = function() { 
 
\t $('div.tooltip').remove(); 
 
\t }; 
 

 
\t $("span#hint,label#username'").bind({ 
 
\t mousemove : changeTooltipPosition, 
 
\t mouseenter : showTooltip, 
 
\t mouseleave: hideTooltip 
 
\t }); 
 
});

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

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