Visit our SharePoint Forum

SharePoint developer? Submit Yourself as Freelancer

Saturday, June 7, 2008

Javascript and CSS in XSLT

I had a requirenment to display a little tooltip like pop-up on mouseover(hoverover) of the Links(Single LineText) displayed using a DataView WebPart.The tooltip would contain description of the Link again puled in from the List.

Something like:
"Send Us Feedback" is a Title(named as Links) in the List and "Tell us what you think.." is Links description.
To do this we need to add a CSS for creating a tooltip in DataView's XSLT.
The List that I used had following columns:
1. Links
2. Descriptions
3. URL for the Link.

In Data view XSLT header put the following CSS for creating a tooltip pop-up

Refer the CSS class "link" to make a pop-up with description(defined in span)

So you get the POP-UP Now.
Another requirenment was to open up the Link("Send us the feedback" in this case) in a New window. The Url for new window is also pulled in from same List.
This is done by using the below code:

About XSLT
XSLT is a language for transforming XML documents into XHTML documents or to other XML documents.

XPath is a language for navigating in XML documents.
What is XSLT?
XSLT stands for XSL Transformations
XSLT is the most important part of XSL
XSLT transforms an XML document into another XML document
XSLT uses XPath to navigate in XML documents
XSLT is a W3C Recommendation
XSLT = XSL Transformations
XSLT is the most important part of XSL.
XSLT is used to transform an XML document into another XML document, or another type of document that is recognized by a browser, like HTML and XHTML. Normally XSLT does this by transforming each XML element into an (X)HTML element.
With XSLT you can add/remove elements and attributes to or from the output file. You can also rearrange and sort elements, perform tests and make decisions about which elements to hide and display, and a lot more.
A common way to describe the transformation process is to say that XSLT transforms an XML source-tree into an XML result-tree.
XSLT uses XPath to find information in an XML document. XPath is used to navigate through elements and attributes in XML documents.
How Does it Work?
In the transformation process, XSLT uses XPath to define parts of the source document that should match one or more predefined templates. When a match is found, XSLT will transform the matching part of the source document into the result document.


Anonymous said...

Hi Can Any one give me sharepoint portal software so tht can download and also intructions to install, am new to sharepoint, thanks

Unknown said...

Hi not sure if your still checking comments on this post, but you mention exactly what i need to do with a dataview web part. i follow you example exactly but for some reason i get no content in the tooltip, as if access in not being allow or something. i was wondering if there is a setting i could check to make sure It not being block or something. the only thing i have changed is you have @descriptions i put @description no s because that was the name of my field. i didnt need to create a link so i was wondering would i still need the javascript you have for just the tooltip or is that also needed to show tooltip
thanks again.

Isha kapoor said...


were u able to make the pop-up .. i did that again in my new project ..i just showed a pop-up without links .. i think u need to check the internal name of ur fields description and title/links... emial me if u didnt get that working

Anonymous said...

Very good Post. I got some ideas from the post

Thank you

Ravinder Kumar

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

SharePoint Programming