Suggestion for TipTip: content function

Martijn's Avatar

Martijn

07 Feb, 2014 01:08 PM

TipTip is nice and I like the HTML support it provides, but I don't really want to write HTML code in the attributes of HTML elements while I would still like to have HTML-styled tooltips. To achieve this I made the following change to the original TipTip code I downloaded:

I replaced this:

    return this.each(function () {
        var org_elem = $(this);
        if (opts.content) {
            var org_title = opts.content;
        } else {
            var org_title = org_elem.attr(opts.attribute);
        }

with this:

    return this.each(function () {
        var org_elem = $(this);
        if (opts.content) {
            if (typeof opts.content === 'function') {
                var org_title = opts.content(this);
            } else {
                var org_title = opts.content;
            }
        } else {
            var org_title = org_elem.attr(opts.attribute);
        }

This allows for the tooltip content to be automatically generated for each element, like so:

$(function () {
    $('.brand').tipTip({
        defaultPosition: "top",
        content: function (elem) {
            var html = '';
            html = html + 'Title: ' + elem.title + '<br/>';
            html = html + 'More stuff: ' + elem.getAttribute('data-more');

            return html;
        }
    }).removeAttr('title');
});

It's a simple change that allows for many more possibilities with your library.

Thanks.

  1. 1 Posted by Martijn on 07 Feb, 2014 01:24 PM

    Martijn's Avatar

    I forgot to mention that while you can provide a function to the content property by default, it doesn't get a reference to the original element and "this" refers to the tooltip DIV. So it's kinda useless.

  2. 2 Posted by Martijn on 07 Feb, 2014 01:40 PM

    Martijn's Avatar

    I just realized a better solution by using the HTML 5 elements figure and figcaption and doing the HTML formatting in the figcaption.

        $('figure.brand').tipTip({
            maxWidth: "400px",
            defaultPosition: "top",
            content: function (elem) {
                var $elem = $(elem);
    
                return $elem.find('figcaption').html();
            }
        }).find('img').removeAttr('title');
    

    The HTML then looks like:

    <figure class="brand">
        <img src="/images/logos/html5.png" width="50" height="50" alt="HTML 5" title="HTML 5 (markup, web)" />
    
        <figcaption>
            <b>HTML 5</b><br /><br />
    
            Blablabla. <i>I can do everything I want here</i>. Including more images, or "special characters" without escaping.<br/><br/>
    
            This also looks nice sementically.
        </figcaption>
    </figure>
    

    And CSS:

    figure.brand {
        display: inline-block;
        margin: 0;
    }
    figure.brand figcaption {
        display: none;
    }
    

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

Recent Discussions

08 Feb, 2017 08:05 AM
08 Feb, 2017 08:02 AM
08 Feb, 2017 07:56 AM
08 Feb, 2017 07:53 AM
08 Feb, 2017 07:45 AM