JQuery Tooltip Show And Hide Toggle Button

jQuery Tooltip Show and hide toggle button

Contents

In this Post We Will Explain About is jQuery Tooltip Show and hide toggle button With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to jQuery Tooltip PluginExample

In this post we will show you Best way to implement jquery tooltip, but on click instead of hover, hear for jquery – Show and hide bootstrap tooltip using javascriptwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

jquery – Show and hide bootstrap tooltip using javascript

Include First of all jquery-ui.cssand then Make a HTML file and define markup

markup file (index.html)

javascript Source Code

prevent mouseout and other related events from firing their handlers – Make a js file and define scripting

//load jquery
$(function () {
//for using show data
    $(document).on('click', '.trigger', function () {
        $(this).addClass("on");
        $(this).tooltip({
            items: '.trigger.on',
            position: {
                my: "left+30 center",
                at: "right center",
                collision: "flip"
            }
        });
        $(this).trigger('mouseenter');
    });
	//for using hide data
    $(document).on('click', '.trigger.on', function () {
        $(this).tooltip('close');
        $(this).removeClass("on");
    });

    $(".trigger").on('mouseout', function (e) {
        e.stopImmediatePropagation();
    });
});

Example

jQuery Tooltip toggle button click with show and hide

style.css

.tooltip {
    font-family:tahoma;
    background-color: green;
    border: 1px solid red;
    box-shadow: 0 0 10px green;
    color: #FFFFFF;
    display: none;
    font-size: 12px;
    padding: 10px 15px;
    text-align: left;
    width: 200px;
}

index.html(Make a HTML file and define markup)


    Please Enter Address Name :
    
    
    

    Please Enter GF Name :

javascript file(Make a js file and define scripting)

$("button[title]").tooltip({
    events: {
        def:     "mouseenter,mouseleave",   
        input:   "focus,blur",              
        widget:  "focus click,blur",  
        tooltip: "mouseenter,mouseleave"     
    }
});

Example

I hope you have Got What is jquery – Show and hide bootstrap tooltip using javascript And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.