How to convert data attribute string value to html elements?

Question

I am new to programming and English language.

I am working on showing the tooltip with the dynamic content loading using CSS.

The problem is,

I am pushing the values that contains html element tags to the data-info attribute dynamically using JQuery. It is stored as a string and while displaying on tooltip it is showing with html tags as strings.

Is there any possible way to show the tooltip with the values formatted as HTML.

I'm trying with the following is the code:

 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>

Please anyone get me rid out of this.

Thanks in advance.

Sorry I cant do this . I had included my code. please look from this. — Praveen Kumar
– Praveen Kumar, Commented Jan 14, 2016 at 6:20
I think the problem is that you can't render HTML elements from text in a pseudo element's content. It's just text. Have you considered jQuery-UI's Tooltip widget? — Vince
– Vince, Commented Jan 14, 2016 at 6:23

Little Phild · Accepted Answer · 2016-01-14 07:40:05Z

1

Here’s a simple idea to create a tooltips message with jQuery.

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

edited Jan 14, 2016 at 7:40

answered Jan 14, 2016 at 6:41

Little Phild

8051 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Praveen Kumar Over a year ago

Thanks but am restricted to use plugin. Can u give me some other solution, please ?

Little Phild Over a year ago

I have updated my answer but it requires more css to meet your gender

Collectives™ on Stack Overflow

How to convert data attribute string value to html elements?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related