Pass HTML code as CSS content using JavaScript

Question

I have a jQuery function like below.

function resultfucntion(state) {
        if (!state.id) {
          return state.text;
        }
        
        var state_output = $("<span data-tooltip='"+state.value +"'>" +  state.text +
            "<span>(" + state.text1 + ")</span></span>"
        );

        return state_output;
      }

I would like to pass HTML code as content value to below CSS code

span:hover:before {
    content: attr(data-tooltip);
    position: absolute;
    padding: 5px 10px;
    margin: -3px 0 0 180px;
    background: orange;
    color: white;
    border-radius: 3px;
}

I am getting output like below

I read this post.

Now I am looking for a JavaScript or jQuery way to pass HTML value as CSS content.

Answer 1

I'm not quite sure if it's possible to do it the way you want it. But this may be a solution how you could achieve the same goal:

$('span').hover(function() {
  $(this).after(`<div class="tooltip-box">${$(this).attr('data-tooltip')}</div>`);
  $('.tooltip-box').show();
}, function() {
  $('.tooltip-box').hide();
});

.tooltip-box {
  position: absolute;
  padding: 5px 10px;
  margin: -3px 0 0 180px;
  background: orange;
  color: white;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-tooltip="I am <strong>strong</strong>, <em>emphasized</em> and <mark>marked</mark>.">Hyperlink</span>

Update

It is not clear to me what the point of your function should be. However, this is how you could combine the above code with your function:

function resultfucntion(state) {
  if (!state.id) {
    return state.text;
  }

  var state_output = `<span data-tooltip='${state.value}'>${state.text}<span>(${state.text1})</span></span>`;

  return state_output;
}

const state = {
  id: 1,
  value: 'I am <strong>strong</strong>, <em>emphasized</em> and <mark>marked</mark>.',
  text: 'Hyperlink',
  text1: 1
}

$('body').append(resultfucntion(state));


$('span').hover(function() {
  $(this).after(`<div class="tooltip-box">${$(this).attr('data-tooltip')}</div>`);
  $('.tooltip-box').show();
}, function() {
  $('.tooltip-box').hide();
});

.tooltip-box {
  position: absolute;
  padding: 5px 10px;
  margin: -3px 0 0 180px;
  background: orange;
  color: white;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>