How to put HTML content inside tiptip

richard.pearson's Avatar

richard.pearson

19 May, 2012 01:46 PM

Help please I have written the following (attached) but I'm stuck in how to get

to appear inside the tooltip, I have enabled the content true in the JS

Any help please would be appreciated:

  1. 1 Posted by richard.pearson on 19 May, 2012 01:47 PM

    richard.pearson's Avatar

    File sorry forgot to attach it

  2. 2 Posted by Nino Kay on 26 May, 2012 06:27 PM

    Nino Kay's Avatar

    I'm not sure I understood your question, but based on your script I'm assuming you would like to populate the tooltip with the content of the <div id='twitterBox'>

    If that's so, just declare the following:

    var twHTML=$('#twitterBox').html();

    and in your tipTip call, set the twHTML variable to the content option as follows:

    $(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10, content: twHTML});

    I guess what you meant by "I have enabled the content true in the JS" is that you have set the content to true which is not the case (check the API) since this option allows you to set a string (text including HTML tags) instead of the contents of the default title attribute.

    Anyway I hope I understood your problem and hope that solves it :)

  3. 3 Posted by Gary on 08 Aug, 2012 10:47 AM

    Gary's Avatar

    I've tried this, can't seem to get it to work. My javascript is as follows:

    var imgHTML=$('.imageBox').html();
    $(function(){

    $(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10, content: imgHTML});
    

    });

    I have created a div class:

    .imageBox {

    display:none
    

    }

    And my html is as follows:
    <%= modelVals[(i*3)+j][1] %>

    <%= modelVals[(i*3)+j][1] %>

    The title appears, but I need the image from the hidden div tag to appear instaed.

    Can someone please help?

  4. 4 Posted by Gary on 08 Aug, 2012 01:04 PM

    Gary's Avatar

    I've tried this code to:

    $(function(){

    var imgHTML = $(".imageBox").html();
    $(".someClass").tipTip({maxWidth: "auto", defaultPosition: "right", edgeOffset: 10, content: imgHTML}).removeAttr("title");
    

    });

    This works only on the first link in the page, any other links just show the content of the first tipTip. It would appear its not refreshing the content.

    Any advice please?

  5. 5 Posted by Gary on 08 Aug, 2012 01:34 PM

    Gary's Avatar

    Ooops, reduced the code to:
    $(function(){

    $(".someClass").tipTip({maxWidth: "auto", defaultPosition: "right", edgeOffset: 10, content: $(".imageBox").html()}).removeAttr("title");
    

    });

    Still the content will not refresh.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac