jQuery UI & Tooltips: Custom content

This entry is part 4 of 7 in the series jQuery UI Tooltips

jQuery UI Tooltip – Custom content

Shows how to combine different event delegated tooltips into a single instance, by customizing the items and content options.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Tooltip - Custom content</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .photo {
            width: 300px;
            text-align: center;
        }

        .photo .ui-widget-header {
            margin: 1em 0;
        }

        .map {
            width: 350px;
            height: 350px;
        }

        .ui-tooltip {
            max-width: 350px;
        }
    </style>
    <script>
        $(function () {
            $(document).tooltip({
                items: 'img, [data-geo], [title]',
                content: function () {
                    var element = $(this);
                    if (element.is('[data-geo]')) {
                        var text = element.text();
                        return "<img class='map' alt='" + text +
                                "' src='http://maps.google.com/maps/api/staticmap?" +
                                "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
                                text + "'>";
                    }
                    if (element.is('[title]')) {
                        return element.attr('title');
                    }
                    if (element.is('img')) {
                        return element.attr('alt');
                    }
                }
            });
        });
    </script>
</head>
<body>

<div class='ui-widget photo'>
    <div class='ui-widget-header ui-corner-all'>
        <h2>St. Stephens Cathedral</h2>

        <h3><a href='http://maps.google.com/maps?q=vienna,+austria&amp;z=11' data-geo=''>Vienna, Austria</a></h3>
    </div>
    <a href='http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG'>
        <img src='http://jqueryui.com/resources/demos/tooltip/images/st-stephens.jpg' alt='St. Stephen's Cathedral' class='ui-corner-all'>
    </a>
</div>

<div class='ui-widget photo'>
    <div class='ui-widget-header ui-corner-all'>
        <h2>Tower Bridge</h2>

        <h3><a href='http://maps.google.com/maps?q=london,+england&amp;z=11' data-geo=''>London, England</a></h3>
    </div>
    <a href='http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg'>
        <img src='http://jqueryui.com/resources/demos/tooltip/images/tower-bridge.jpg' alt='Tower Bridge' class='ui-corner-all'>
    </a>
</div>

<p>All images are part of <a href='http://commons.wikimedia.org/wiki/Main_Page'>Wikimedia Commons</a>
    and are licensed under <a href='http://creativecommons.org/licenses/by-sa/3.0/deed.en'
                              title='Creative Commons Attribution-ShareAlike 3.0'>CC BY-SA 3.0</a> by the copyright
    holder.</p>

</body>
</html>
Try The Code

jQuery Mobile: Formatted content

This entry is part 50 of 73 in the series jQuery Mobile

To add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis.

Supplemental information can be added to the right of each list item by wrapping content in an element with a class of ui-li-aside.

Formatted Content
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Formatted Content</h1></div>
    <ul data-role='listview' data-inset='true'>
        <li data-role='list-divider'>Friday, October 8, 2010 <span class='ui-li-count'>2</span></li>
        <li><a href='index.html'>
            <h2>Stephen Weber</h2>
            <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
            <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
            <p class='ui-li-aside'><strong>6:24</strong>PM</p>
        </a></li>
        <li><a href='index.html'>
            <h2>jQuery Team</h2>
            <p><strong>Boston Conference Planning</strong></p>
            <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
            <p class='ui-li-aside'><strong>9:18</strong>AM</p>
        </a></li>
        <li data-role='list-divider'>Thursday, October 7, 2010 <span class='ui-li-count'>1</span></li>
        <li><a href='index.html'>
            <h2>Avery Walker</h2>
            <p><strong>Re: Dinner Tonight</strong></p>
            <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!</p>
            <p class='ui-li-aside'><strong>4:48</strong>PM</p>
        </a></li>
    </ul>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

jQuery Mobile: Combining heading and content with rounded corners

This entry is part 45 of 73 in the series jQuery Mobile

To combine heading and content with rounded corners, we can remove classes attached to the heading line.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Grouping Content</h1></div>
    <div class='ui-body ui-body-a ui-corner-all'>
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

Comparing this example with the previous example, there are no classes declared in line 13.

jQuery Mobile: Header and content with rounded corners

This entry is part 44 of 73 in the series jQuery Mobile

We can have rounded corners for both the content and the heading.

This is done by using ui-corner-all in both the heading and the content declaration.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Grouping Content</h1></div>
    <h3 class='ui-bar ui-bar-a ui-corner-all'>Heading</h3>
    <div class='ui-body ui-body-a ui-corner-all'>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

jQuery Mobile: Header and content

This entry is part 43 of 73 in the series jQuery Mobile

In jQM, we can use ui-bar to create a full-width heading.

Add class ui-body to emphasize a section of content.

Additionally, classes ui-body-[a-z] add the appropriate swatch from your theme.

Header and Content
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Grouping Content</h1></div>
    <br>
    <h3 class='ui-bar ui-bar-a'>Heading</h3>
    <div class='ui-body'>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>

</html>
Try The Code

To add a slight change to the heading to have rounded corners.  We can add ui-corner-all.

Try The Code