How to add a tooltip dialog in a Share Point 2010 wiki


  • Hello...

    I am working with share point 2010 and a wiki with about 20 pages. Now I'd like to add some tooltips / mouseover effects on some elements. The title attribute in a html tag does not help, cause I just can enter text. I'd like to have tooltips with pictues, formatted text...

    Can anybody help?

    I also tried to add custom html, but <script> and <style> is not allowed or will be removed.



    Wednesday, July 31, 2013 1:12 PM

All replies

  • You cannot just type html directly into the rich text editor portion of the screen. However using the Content Editor Web Part you can. Insert the content editor web part and then when selected choose edit source and add your html there.

    I use JQuery UI so in your content editor web part use JQuery to add title attribute to create tooltip.

    Ted Wagner SharePoint Architect

    Wednesday, July 31, 2013 2:48 PM
  • okay... I tried to work with that instruction:

    I have added a new Web Part (Announcement) but when I want to edit the web part I do not get a html editor or something like that. The arrow in the right upper corner of the web part opens a submenu but there is no editor option.

    I also checked out that video. But it does not help... Any ideas?

    Friday, August 02, 2013 11:29 AM
  • Hello Roger:

    My suggestion would be to use jQuery to bind a suitable HTML string or JavaScript popup message to the MouseOver event of the element.  This can be accomplished using jQuery.  Using jQuery, you can bind your custom JavaScript function to the element using a single line of code.  Here's one possible solution path using this approach:

    1. Create JavaScript functions that display the tooltips for each element as desired.
    2. Include the jQuery library in the MasterPage (so that you can access it from any site page).
    3. To aid jQuery to find the element you can use one of several methods: 1) walk the DOM using jQuery methods; 2) use the unique ID that SharePoint creates for each element; or 3) use an empty unique class name.  These methods are discussed in greater detail in the references.
    4. You can package all of this into a single text file and then link to it from a Content Editor web part inserted into the page, or copy and past the script into the CE web part itself.  or just edit the page itself and insert directly into the page between suitable contentplaceholder tags.



    Monday, October 14, 2013 4:43 AM
  • Tuesday, October 28, 2014 2:04 PM