Greetings,
I recently implemented qTip on my website and here is a snippet of how the document ready function appears:
$.fn.qtip.styles.mystyle = { // The last part indicates the style name
width: 200,
background: '#ebf1ff',
color: 'black',
textAlign: 'center',
border: {
width: 1,
radius: 4,
color: '#AACCEE'
},
tip: 'bottomLeft',
name: 'dark'
}
$('.controlTitleContainer .icon').qtip({
content: $(this).find('.tooltip').html(),
position: {
corner: {
target: 'topRight',
tooltip: 'bottomLeft'
}
},
style: 'mystyle'
});
The initial part deals with styling, while the latter determines the qtip content.
A typical section of my HTML code looks like this:
<div class="controlTitleContainer">
<div class="text">
<label for="ModelViewAd_Title">Title</label>
</div>
<div class="icon">
<div class="toolTip">MyToolTipTest</div>
</div>
</div>
Note: The toolTip class is set to Display : none, and the icon class div will display the tooltip
I will have multiple HTML sections like this on a single page with different data. I would like the tooltip to display the current inner html of each section. Is there a way to achieve this without generating a declaration of qtip for every HTML snippet?
Your advice is greatly appreciated.
Best Regards