Creating imagemap tooltips with CSS and jQuery

popup 2
Contents

    In this article you will learn how to create imagemap tooltips with CSS and jQuery.

    Understanding image maps

    An image map is an HTML element that makes it possible to click on different areas of an image, which leads to different destinations or triggers different actions.

    <div id="image-map">
    <img width="611" height="438" src="your-image.jpg" alt="Our Locations">
    <div class="pin" data-xpos="255" data-ypos="65">
    <h2>Chelsea Place</h2>
    <ul>
    <li><strong>123 Street Address</strong></li>
    <li>City, ST, 12345</li>
    <li><strong>(555) 555-5555</strong></li>
    <li><a href="#" target="_blank">Website</a></li>
    <li>Coming in Spring 2015</li>
    </ul>
    </div>
    </div>

    Styling with CSS

    Let’s start by creating a basic CSS style for the tooltip. We want the tooltip to be displayed when users move the mouse over an image map area.

    /* Web Font */
    * {
    font-family: 'Titillium Web', sans-serif;
    }

    /* Relative positioning*/
    #image-map {
    position: relative;
    margin: 150px auto 20px auto;
    }

    /* Hide the original tooltip content */
    .pin {
    display: none;
    }

    /* Begin styling the tooltips and pins */
    .tooltip-up, .tooltip-down {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;}

    .tooltip-down {
    background-position: 0 -37px;
    }

    .tooltip {
    display: none;
    width: 200px;
    cursor: help;
    text-shadow: 0 1px 0 #fff;
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 999;
    margin-left: -115px;
    padding:15px;
    color: #222;
    border-radius: 5px;
    box-shadow: 0 3px 0 rgba(0,0,0,.7);
    background: #fff1d3;
    background: linear-gradient(top, #fff1d3, #ffdb90);
    }

    .tooltip::after {
    content: ”;
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;
    border-bottom: 10px solid #fff1d3;
    border-left: 10px solid transparent;
    border-right : 10px solid transparent;
    }

    .tooltip-down .tooltip {
    bottom: 12px;
    top: auto;
    }

    .tooltip-down .tooltip::after {
    bottom: -10px;
    top: auto;
    border-bottom: 0;
    border-top: 10px solid #ffdb90;
    }

    .tooltip h2 {
    font: bold 1.3em ‘Trebuchet MS’, Tahoma, Arial;
    margin: 0 0 10px;
    }

    .tooltip ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    jQuery for tooltip interaction


    $(document).ready(function(){

    // Set the width and height of the image card so that they match the image size
    $(‘#image-map’).css({‘width’:$(‘#image-map img’).width(),
    ‘height’:$(‘#image-map img’).height()
    })

    //Tooltip direction

    var tooltipDirection;

    for (i=0; i<$(“.pin”).length; i++)
    {
    // Set the direction type of the tooltip – up or down

    if ($(“.pin”).eq(i).hasClass(‘pin-down’)) {
    tooltipDirection = ‘tooltip-down’;
    } else {
    tooltipDirection = ‘tooltip-up’;
    }

    // Add the tooltip
    $(“#image-map”).append(”

    \

    ” + $(“.pin”).eq(i).html() + “

    \

    “);
    }

    // Show/hide tooltip
    $(‘.tooltip-up, .tooltip-down’).mouseenter(function(){
    $(this).children(‘.tooltip’).fadeIn(100);
    }).mouseleave(function(){
    $(this).children(‘.tooltip’).fadeOut(100);
    })
    });

    It calculates the tooltip position based on the mouse coordinates.

     

    As experts at Olbricht IT, we are proud to have optimized service-erp.de for mobile use. Our goal was to create a seamless, user-friendly experience for all mobile device users. Here’s a quick look at how we achieved this, with particular reference to our work with the Divi Theme and WordPress.

    Responsive design with Divi Theme: We used the Divi Theme to create a responsive and flexible design for service-erp.de. Divi is known for its ease of use and flexibility, which has allowed us to create a design that automatically adapts to different screen sizes and devices. With Divi, we have been able to ensure that every aspect of the website, from navigation to content, is optimally displayed on mobile devices.

    WordPress – A solid foundation: WordPress is the backbone of service-erp.de. As the world’s leading content management system, WordPress offers a robust and flexible platform for websites of any size. The combination of WordPress and Divi enabled us to develop a powerful, scalable and user-friendly mobile website.

    Optimization for speed: Mobile users expect fast loading times, and that’s exactly what we kept in mind. We have used state-of-the-art techniques to minimize loading times and guarantee a fast browsing experience.

    At Olbricht IT, we understand the importance of a strong mobile presence. With our expertise in WordPress and Divi, combined with our focus on user experience and speed, we have turned service-erp.de into a mobile website that not only looks good, but also works great.

    Dieser Beitrag ist auch verfügbar auf: Deutsch (German)

    Updated on 27. March 2024
    Tagged: , , , , , , , ,
    Was this article helpful?

    Related Articles

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Contents