This topic contains 7 replies, has 3 voices, and was last updated by  alexbible 9 years, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Tooltip Containing New Page #4814

    shimmoril
    Participant

    Is is possible to create a tooltip w/ jqwidgets that contains a whole new page? For example, I am currently using qtip, which allows me to specify a URL for my content.

    Tooltip Containing New Page #4840

    Peter Stoev
    Keymaster

    Hi shimmoril,

    What do you mean by displaying “whole new page” – display the HTML of a page i.e load the tooltip’s content via Ajax or display a page within iframe in a tooltip?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tooltip Containing New Page #4859

    shimmoril
    Participant

    I mean that I currently have page A, which contains tooltips which load page B. Separate pages w/ separate data and HTML. Of your two options I think it’s the AJAX one, but I’m not entirely sure what you mean by that.

    Tooltip Containing New Page #4924

    Peter Stoev
    Keymaster

    Hi shimmoril,

    It is possible to make the tooltip to display HTML, but the HTML string should be set during the tooltip’s initialization. If you want to load the content via Ajax call, you can create the tooltip in the jQuery ajax’s success function.

    For example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#jqxTooltip").jqxTooltip({ showHtml: true, width: 250});
    var element = $('#bottomRight');
    $("#jqxTooltip").jqxTooltip('add', element, '<b>My Tooltip</b>');
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style='margin-left: 50px; font-family: Verdana Arial; font-size: 13px;
    width: 400px;'>
    <div>
    Move cursor to any gray rectangle below to display a Tooltip:
    </div>
    <div style='margin-left: 40px; margin-top: 50px;'>
    Bottom-Right
    </div>
    <div id='bottomRight' style='background: Gray; margin-left: 50px; margin-top: 10px;
    width: 10px; height: 10px;'>
    </div>
    <div id='jqxTooltip'>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tooltip Containing New Page #4936

    shimmoril
    Participant

    Can you provide an example of “create the tooltip in the jQuery ajax’s success function.”? My tooltip page is too complicated to be recreated in the Javascript.

    Tooltip Containing New Page #4979

    Peter Stoev
    Keymaster

    Hi shimmoril,

    If your page is complicated, it might be a better solution to add ‘iframe’ tag in the tooltip and set its ‘src’ attribute to point to your page.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tooltip Containing New Page #4980

    shimmoril
    Participant

    Ahh, that would make much more sense. It’s also very similar to what we’re currently doing. Thanks for your helping walking through this Peter.

    Tooltip Containing New Page #72856

    alexbible
    Participant

    Hi, I’m trying to put big tooltips inside the grid and I need them to be rendered as iframe.

    I found “qTip2” and was able to copy how it works here:
    http://talmidimedition.x40x.net/_jQwidgets/mobiledemos/jqxgrid/_qTip2.html

    Here’s what I’m trying:
    http://talmidimedition.x40x.net/_jQwidgets/mobiledemos/jqxgrid/_grid_with_tooltips_each_word.htm

    Thanks for all your help!
    Alex

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.