I have a cluetip that is displayed when a user clicks a link. When the tip is displayed I want it to have a title but it does not want to show the title.
$('#spouseMortalityImage').cluetip({
titleAttribute: 'alt',
titleAttribute: 'Title',
sticky: 'true',
closeText: '<img align="right" width="16px" height="16px" src="../images/buttonTip.gif" alt="close" />',
closePosition: 'title',
ajaxSettings:{
data:{
age:"<%= personalInfoBean.getSpouseAge()%>",
gender:"<%= personalInfoBean.getSpouseGender()%>",
country:$("input[name=planningCountry]").val(),
}
}
});
I want the title to be displayed but its not showing up. This is the HTML im using.
<td class="centerAlignedContext" width="50%">
<pp:text name="personalInfoBean" property="clientMortality" size="8" maxlength="3" style="text-align:center;" styleClass="wamoney" />
</td>
<td width="20%">
<a class="title" href="#" title="Chance of Survival"></a>
<img id="clientMortalityImage" style="height:15px;" src="../images/suggestion.jpg" rel="ProbabilityOfSurvival.do"/>
</td>
I have never used this plugin but going through the documentation, I wanted to suggest some changes which may work. In your JQuery code, make these changes and try it:
titleAttribute
options.title
attribute like<img id="spouseMortalityImage" title="Hello"/>
in your markup to the correct tag with idspouseMortalityImage
which you have shown in Jquery. In the markup you have posted currently, I do not see this element. Instead I see an<img>
tag with IDclientMortalityImage