Search code examples
jquerycheckboxtooltip

jQuery checkbox tooltip

I use the following jQuery function for tooltip on input text, textarea and dropdown:

$(function() {
$("#addmovie-form :input:not(:button):not(:submit):not(:reset)").tooltip({
        position: "center right",
        offset: [-2, 10],
        effect: "fade",
        opacity: 0.7

    });
});

I add then a tooltip to a text, textare or dropdown with code:

$('#add-titel').prop("title", "my title ...");

This is working fine on text, textarea and dropdown inputs.

Now I have also multiple checkboxes inside the form and If I assign a tooltip to the checkbox id's, the tooltip is not displayed. Also the checkboxes are jumping around on mouseover like this:

example before

example after mousehover

Does someone have a solution for this?

I also thought, it would be better to put a html table around the whole checkboxes and display the tooltip on table hover. I found some TD or TR jquerys for this, but i can't get it to work on the complete table.

Solution

  • try to add tool-tip on checkboxes label or try to wrap checkbox in span and add tooltip on it