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'>
    <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='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        .photo {
            width: 300px;
            text-align: center;

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

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

        .ui-tooltip {
            max-width: 350px;
        $(function () {
                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');

<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>
    <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'>

<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>
    <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'>

<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

Try The Code
Series Navigation<< jQuery UI & Tooltips: Custom animations
jQuery UI & Tooltips: Form >>

Leave a comment

Leave a Reply