jQuery Tooltip Show and hide toggle button

jQuery Tooltip Show and hide toggle button

jQuery Tooltip Show and hide toggle button

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

  PHP Add JSON object Data Example

markup file (index.html)

<input id="input_box1" />
<button id="trigger1" class="trigger" data-tooltip-id="1" title="Welcome to Pakainfo.com ">?</button>
</p>
<p>
    <input id="input_box2" />
    <button id="trigger2" class="trigger" data-tooltip-id="2" title="Welcome to w3free">?</button>
</p>
<p>
    <input id="input_box3" />
    <button id="trigger3" class="trigger" data-tooltip-id="3" title="Welcome to Tutorials">?</button>
</p>
<p>
    <input id="input_box4" />
    <button id="trigger4" class="trigger" data-tooltip-id="4" title="Welcome to Angularjs">?</button>

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

  Laravel Upload Import CSV Data Into MySQL Database

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)
<div id="buttons">
    <label for="text1">Please Enter Address Name :</label>
    <input id="text1" class="form-control" type="text" title="This is the tooltip<br />for input 1" />
    <button id="button1" class="btn btn-success" title="This is the w3free<br />for Download">click</button>
    <br />
    <label for="text2">Please Enter GF Name :</label>
    <input id="text2" class="form-control"  type="text" title="This is the tooltip<br />for input 2" />
    <button id="button2" class="btn btn-primary" title="This is Live24u<br />for Example">click</button>
</div>

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

  JQUERY Examples Programming Tutorials

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.