I'm struggling with a piece of code that showcases a tooltip when the user hovers over the question circle icon. The tooltip's content can't exceed 1000 characters, but I need to figure out how to make the overflow scroll by adjusting the tooltip in data-toggle mode.
<i class="fa fa-question-circle" data-toggle="tooltip" title="@participant.DeclineReason" data-placement="bottom"></i>
Although I have the code for the data toggle in the JS script, I'm uncertain about how to modify the tooltip properties:
@this.ScriptBlock(@<script>
$(function (){
$('.pie-chart').each(function () {
$(this).pieChart({
type: 'pie',
barColor: getColor($(this).attr('data-percent')),
trackColor: '#eee',
lineCap: 'round',
lineWidth: 5,
rotate: 0,
size: 145
});
$(this).find('.pie-chart__percentage').text($(this).data('percent') + '%');
});
$('.pie-chart-notparticipating').each(function () {
$(this).pieChart({
type: 'pie',
barColor: getContrastColor($(this).attr('data-percent')),
trackColor: '#eee',
lineCap: 'round',
lineWidth: 5,
rotate: 0,
size: 145,
});
$(this).find('.pie-chart__percentage').text($(this).data('percent') + '%');
});
$('[data-toggle="tooltip"]').tooltip(); <-------------//this line here
});