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.

It's not clear to me what you're trying to do here, but you certainly don't want to use that CSS. Span elements are very common, and you don't want every one of them having those styles on hover. — isherwood
– isherwood, Commented Mar 3, 2022 at 2:07
Could you explain a little more what you want when you say “pass HTML code as content”. It looks as though that is what you have done. Did you expect the content to interpret the HTML rather than just treat it as a string? — A Haworth
– A Haworth, Commented Mar 3, 2022 at 2:25
You will I think need to put the HTML in the DOM not as content in a pseudo element. — A Haworth
– A Haworth, Commented Mar 3, 2022 at 3:26
I'd suggest that you get this question fully sorted before asking aother, similar, one. The undefined must be possible for you to track down - what are you writing to that item? We don't have enough of your code and context to be able to work that out. — A Haworth
– A Haworth, Commented Mar 3, 2022 at 9:13

Reza Saadati · Accepted Answer · 2022-03-03 03:12:40Z

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>

edited Mar 3, 2022 at 3:12

answered Mar 3, 2022 at 2:03

Reza Saadati

5,4644 gold badges33 silver badges69 bronze badges

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

9 Comments

abu abu Over a year ago

Thanks @Reza Sasdati. Could you please do something inside function function resultfucntion(state) {} ? Thanks.

Reza Saadati Over a year ago

Sure. I have updated my answer.

Reza Saadati Over a year ago

In your case, probably state.value is missing. Try console.log(state) in your function to see what the output of it is.

Reza Saadati Over a year ago

Remove var from var options = []; (to set it as global). Then replace templateResult: resultfucntion with templateResult: resultfucntion(options).

Reza Saadati Over a year ago

I can't test your code. Please add HTML to it. templateResult is the only way that you are trying to invoke the function resultfucntion(). Your function requires a parameter, which should be an object, and you are not passing a parameter. Also, options is an array. It should be an object instead.

|

Collectives™ on Stack Overflow

Pass HTML code as CSS content using JavaScript

1 Answer 1

Update

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related