0
382
VistasPasar código HTML como contenido CSS usando JavaScript
Tengo una función jQuery como la siguiente.
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; }Me gustaría pasar el código HTML como valor de contenido debajo del código CSS
span:hover:before { content: attr(data-tooltip); position: absolute; padding: 5px 10px; margin: -3px 0 0 180px; background: orange; color: white; border-radius: 3px; }Estoy obteniendo una salida como la siguiente
Leí esta publicación .
Ahora estoy buscando una forma de JavaScript o jQuery para pasar el valor HTML como contenido CSS.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
No estoy muy seguro de si es posible hacerlo de la manera que lo desea. Pero esta puede ser una solución para lograr el mismo objetivo:
$('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>Actualizar
No me queda claro cuál debería ser el punto de su función. Sin embargo, así es como podría combinar el código anterior con su función:
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta