Integrating jQuery Tooltip with Mouseover Event

Question

Integrating jQuery Tooltip with Mouseover Event

I'm currently involved in creating a map of MIT projects for an architectural firm, and facing the challenge of maintaining the red dots mouseover state even when the mouse hovers over the tooltips that appear. Presently, the mouseover effect turns off when hovering over the tooltips.

In addition, I require the tooltips to be cleared and turned off when either the dot or the link within the tooltip is clicked. On an iPad, I observed that after clicking a tooltip link leading to a project page and then returning to the map page using the back button, the last tooltip remains open unexpectedly. This issue does not seem to occur on desktops, but it is crucial for mobile devices to have the tooltip cleared upon hitting the back button.

You can find the site I'm referring to here: and the corresponding stylesheet here:

Below is the CSS code related to the circle sprite for each button - my aim is to connect these with the tooltips. Specifically, I wish for the red circle hover state to persist when the mouse moves from red circle button 11 to its respective tooltip until it moves away from the tooltip.

#button { background:transparent url(../images/red-circle.png) no-repeat scroll 0px -2px; display:block; height:23px; width:23px; } #button:hover { background-position:0 -25px; opacity: 1; }'

Furthermore, what would be the most effective method to ensure the tooltip closes when any link within it is clicked? Unusually, on mobile devices, if you tap to activate the hover state and then click a link inside it, the tooltip remains open upon hitting the back button.

javascript jquery html css tooltip

Answer 1

Answer №1

If you want to customize the behavior of your tooltips when shown or hidden, you can utilize the events onShow and onHide for each tooltip. Let me demonstrate how this works using your code. Below are the divs for your trigger buttons:

<div id="eleven_div" class="button-eleven" style="display: block; ">
    <a href="projects/gantt/" id="button">Button 11</a>
</div>
<div id="ten_div" class="button-ten" style="display: block; ">
    <a href="projects/table/" id="button">Button 10</a>
</div>
...

And here is the corresponding javascript:

$(".button-one").tooltip({
    position: "center right",
    delay:300,
    effect: 'slide',
    direction:'right',
    offset: [30, -12],
    slideOffset: 30,
    slideFade:'true',
    slideInSpeed:350,
    slideOutSpeed:250
});

$(".button-two").tooltip({ 
    position: "bottom left",
    delay:300,
    effect: 'slide',
    direction:'left',
    offset: [-34, 20],
    slideOffset: 30,
    slideFade:'true',
    slideInSpeed:350,
    slideOutSpeed:250
});
...

You need to change the duplicate ids inside the a-tags to classes as having duplicate ids is incorrect HTML markup:

<div id="eleven_div" class="button-eleven" style="display: block; ">
    <a href="projects/gantt/" class="button">Button 11</a>
</div>
<div id="ten_div" class="button-ten" style="display: block; ">
    <a href="projects/table/" class="button">Button 10</a>
</div>

Incorporate a callback function for showing red dots on hover. This function will add or remove a class from the triggering a-tag. Updated code:

function hovering()
{
    this.getTrigger().find("a").first().toggleClass("hovered");
}

$(document).ready(function() {

    $(".button-one").tooltip({
        position: "center right",
        delay:300,
        effect: 'slide',
        direction:'right',
        offset: [30, -12],
        slideOffset: 30,
        slideFade:'true',
        slideInSpeed:350,
        slideOutSpeed:250,
        onShow: hovering,
        onHide: hovering
    });

    $(".button-two").tooltip({ 
        position: "bottom left",
        delay:300,
        effect: 'slide',
        direction:'left',
        offset: [-34, 20],
        slideOffset: 30,
        slideFade:'true',
        slideInSpeed:350,
        slideOutSpeed:250,
        onShow: hovering,
        onHide: hovering
    });
...

Update your CSS to apply styles to the button class instead of #button:

.button {
    background:transparent url(../images/red-circle.png) no-repeat scroll 0px -2px;
    display:block;
    height:23px;
    width:23px;
    overflow:hidden;
    text-indent:-999em;
    cursor:pointer;
    opacity: 1;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}

.button:hover, .button.hovered{
    background-position:0 -25px;    
    opacity: 1;
}

.button:focus {
    background-position:0 -25px;
}

To close the tooltip when a link is clicked, add the following code after defining your tooltips:

$(".tooltip, .tooltip-brite, ... all your tooltip-classes").live("click", function() {  
    $(this).prev().tooltip().hide();
});

$(".button-two, .button-one, ... all your button-classes").live("click", function() {   
    $(this).tooltip().hide();
});

This snippet ensures that clicking either the red dot div or the tooltip box will close the tooltip.

Answer 2

If you want to customize the behavior of your tooltips when shown or hidden, you can utilize the events onShow and onHide for each tooltip. Let me demonstrate how this works using your code. Below are the divs for your trigger buttons:

<div id="eleven_div" class="button-eleven" style="display: block; ">
    <a href="projects/gantt/" id="button">Button 11</a>
</div>
<div id="ten_div" class="button-ten" style="display: block; ">
    <a href="projects/table/" id="button">Button 10</a>
</div>
...

And here is the corresponding javascript:

$(".button-one").tooltip({
    position: "center right",
    delay:300,
    effect: 'slide',
    direction:'right',
    offset: [30, -12],
    slideOffset: 30,
    slideFade:'true',
    slideInSpeed:350,
    slideOutSpeed:250
});

$(".button-two").tooltip({ 
    position: "bottom left",
    delay:300,
    effect: 'slide',
    direction:'left',
    offset: [-34, 20],
    slideOffset: 30,
    slideFade:'true',
    slideInSpeed:350,
    slideOutSpeed:250
});
...

You need to change the duplicate ids inside the a-tags to classes as having duplicate ids is incorrect HTML markup:

<div id="eleven_div" class="button-eleven" style="display: block; ">
    <a href="projects/gantt/" class="button">Button 11</a>
</div>
<div id="ten_div" class="button-ten" style="display: block; ">
    <a href="projects/table/" class="button">Button 10</a>
</div>

Incorporate a callback function for showing red dots on hover. This function will add or remove a class from the triggering a-tag. Updated code:

function hovering()
{
    this.getTrigger().find("a").first().toggleClass("hovered");
}

$(document).ready(function() {

    $(".button-one").tooltip({
        position: "center right",
        delay:300,
        effect: 'slide',
        direction:'right',
        offset: [30, -12],
        slideOffset: 30,
        slideFade:'true',
        slideInSpeed:350,
        slideOutSpeed:250,
        onShow: hovering,
        onHide: hovering
    });

    $(".button-two").tooltip({ 
        position: "bottom left",
        delay:300,
        effect: 'slide',
        direction:'left',
        offset: [-34, 20],
        slideOffset: 30,
        slideFade:'true',
        slideInSpeed:350,
        slideOutSpeed:250,
        onShow: hovering,
        onHide: hovering
    });
...

Update your CSS to apply styles to the button class instead of #button:

.button {
    background:transparent url(../images/red-circle.png) no-repeat scroll 0px -2px;
    display:block;
    height:23px;
    width:23px;
    overflow:hidden;
    text-indent:-999em;
    cursor:pointer;
    opacity: 1;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}

.button:hover, .button.hovered{
    background-position:0 -25px;    
    opacity: 1;
}

.button:focus {
    background-position:0 -25px;
}

To close the tooltip when a link is clicked, add the following code after defining your tooltips:

$(".tooltip, .tooltip-brite, ... all your tooltip-classes").live("click", function() {  
    $(this).prev().tooltip().hide();
});

$(".button-two, .button-one, ... all your button-classes").live("click", function() {   
    $(this).tooltip().hide();
});

This snippet ensures that clicking either the red dot div or the tooltip box will close the tooltip.

Integrating jQuery Tooltip with Mouseover Event

Answer №1

Similar questions

Are there any alternative methods to avoid duplication of Navbar link margin classes in Tailwind CSS?

Attempting to extract information from website, successful on majority of sites but encountering issues on this particular one

How can I accurately show the server time and timezone in JS/jQuery regardless of the user's location?

Before sending an XHR request with Ajax, access can be granted

What is the best way to showcase my React App.js in an HTML document?

Tips on automatically changing the background image every few seconds

Receiving JSON information from a web address using Javascript

jQuery $.ajax problem encountered

Utilizing streams for file input and output operations in programming

I was unable to produce the result of the input value entered at the bottom

"Exploring the Mini Drawer feature on Material UI brings up a whole new page for the Link

A method to find the sum of the final n elements in an array by employing Arr.reduceRight

Zoom in to see the header spanning the entire width of the page

Ways to execute a function when a button is clicked with a shared variable?

Is there a way to divide v-progress linear into 4 pieces in Vuejs, or are there alternative design options for achieving this in Vuetify 2?

Dynamic Bootstrap tooltip

Setting the Default Value for Dropdown Options in Angular 2

The log indicates that there are two distinct IP addresses associated with the user

Using three.js for creating particle systems with custom particle geometries

Troubleshooting the issue: Incompatibility between jQuery .focus() and dynamically generated list items from ng-repeat in AngularJS