compcobalt compcobalt - 1 year ago 95
jQuery Question

Allow <BR> or New Line to jquery tooltip

I would like to know how do I make a new line inside of the tooltip and also make the tooltip more wider

I tried to add a

<br>, <br />, <br/>, \n, /n, &#013;, &#10;
... NOTHING SEEMS TO BE WORKING :(

I also tried to add the following script but I don't know if I did it correctly or if it's useful

<script>
$(document).ready(function () {
$('.tooltip ').tooltiptext({
contentAsHTML: true,
});
});
</script>


CODE:

<script>
// On first hover event we will make popover and then AJAX content into it.

$('[data-poload]').hover(function(event) {
var el = $(this);
// Commenting this (For testing purposes)
$.get(el.data('poload'), function(d) {
// set new content
el.find('.tooltiptext').text(d);
});
});
</script>

<style>
.tooltip {
position: relative;
display: table;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
border-radius: 6px;
padding: 5px 10px;

/* Position the tooltip */
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip" data-poload="//demo2307137.mockable.io/test">
<img src="alerts.gif"/>
<br/><br/><br/>
<span class="tooltiptext">Loading...</span>
</div>

<div class="tooltip" data-poload="testpage.php?id=123">
<img src="alerts.gif"/>
<br/><br/><br/>
<span class="tooltiptext">Loading...</span>
</div>

Answer Source

You are setting the content as text... use html() instead of text()

 $.get(el.data('poload'), function(d) {
    // set new content
    el.find('.tooltiptext').html(d);
  });
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download