Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow HTML in tooltips #313

Closed
mar10 opened this issue Sep 11, 2014 · 1 comment
Closed

Allow HTML in tooltips #313

mar10 opened this issue Sep 11, 2014 · 1 comment

Comments

@mar10
Copy link
Owner

mar10 commented Sep 11, 2014

See here: https://groups.google.com/forum/#!topic/fancytree/-YBJHqLFeoQ

If system <span title="TEXT">can deal with special chars (by escaping it), we don't have to do the escaping when nodes are initialized.
This would allow external tooltip plugins to make use of HTML formatted content

See also #197: we still have to escape ' as &amp;

See also http://stackoverflow.com/a/15734408/19166 and http://bugs.jqueryui.com/ticket/9019 why this might be no good idea.

@mar10
Copy link
Owner Author

mar10 commented Sep 13, 2014

Note: HTML in the title attribute is invalid!

Still we do not escape the tooltip text before writing it to the <span title="TEXT"> attribute, so it is up to the sender to make sure this is escaped, if he wants the markup to be valid HTML.

Note that the browsers default popups do not support HTML markup anyways: tags will be escaped.
jQuery UI Tooltip also stopped supporting it starting with release 1.10. See here for a workaround:

[ {title: "node 1.1", "tooltip": "A <b>bold</b> tooltip's text"}, 
  ... ]
$("#tree").tooltip({
    content: function () {
        return $(this).attr("title");
    }
});

A compliant way to implement HTML formatted tooltips would be to pass the content in a custom field and let the tooltip use it:

[ {title: "node 1.1", "hoverInfo": "A <b>bold</b> tooltip's text"}, 
  ... ]
$("#tree").tooltip({
    items: "span.fancytree-title",
    content: function () {
        var node = $.ui.fancytree.getNode(this);
        return node.data.hoverInfo;
    }
});

@mar10 mar10 closed this as completed in 9bb4d4d Sep 13, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant