Thursday 11 July 2013

Using jQuery tooltip in Visual Force pages


Example of using Jquery Tooltip in Visual force pages.

1.Include the jQuery package in the VF Page
2.call the method tooltip() with reference to the component in the VF page, here in the code the i have called tooltip() method with reference to the entire document. So wherever there is a tag with title attribute the tooltip will be shown with text in the title attribute.

Here is the code :

<apex:page >
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$ = jQuery.noConflict();
$(function() {
$( document ).tooltip()
}
);
</script>

<apex:form >
<apex:inputText title="Input line 1"/><br/>
<apex:inputText title="Input text2"/><br/>
</apex:form>
</apex:page>

No comments:

Post a Comment