AllInWorld99 provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL,FLASH, jQuery, java, for loop, switch case, if, if else, for...of, for...in, for...each,while loop, blogger tips, blogger meta tag generator, blogger tricks, blogger pagination, client side script, html code editor, javascript editor with instant output, css editor, online html editor, materialize css tutorial, materialize css dropdown list,break, continue statement, label,array, json, get day and month dropdown list using c# code, CSS button,protect cd or pendrive from virus, cordova, android example, html and css to make android app, html code play,telerik show hide column, Transparent image convertor, copy to clipboard using javascript without using any swf file, simple animation using css, SQL etc. AllInWorld99 presents thousands of code examples (accompanied with source code) which can be copied/downloaded independantly. By using the online editor provided,readers can edit the examples and execute the code experimentally.


Best jBox jQuery ToolTip

      jBox jQuery plugin is used to show the style tool tips, the tool tips is given from the title attribute.  This tool tips can display various position like (Right, Left, Top and Bottom) of the div or other HTML element.
 
    We should need to integrate the following two .js file, you can use the both link through the following direct link or download and integrate it with your program.

jQuery Tool Tips

Tooltip below to the right

      You can display the Tooltip below to the right using the following jQuery code.
    $('.DemoTooltipBelow').jBox('Tooltip', {
        position: {
            x: 'right',
            y: 'bottom'
        }
    });
---------
---------
<span class="DemoTooltipBelow" title="I'm below and moved to the right">Below to the right</span>


Tooltip with the pointer moved to the right

      You can display the Tooltip with the pointer moved to the right using the following jQuery code.
     $('.DemoTooltipPointer').jBox('Tooltip', {
        pointer: 'right:15' // The pointer is moved to the right with a 15 pixel offset
    });
---------
---------
<span class="DemoTooltipPointer" title="My pointer is moved to the right">Pointer moved</span>


Tooltip at a different target

      You can display the Tooltip at a different target using the following jQuery code.

    $('.DemoTooltipTarget').jBox('Tooltip', {
        target: jQuery('.DemoTooltipBelow')
    });
---------
---------
<span class="DemoTooltipTarget" title="I'm over here">Different target</span>
<span class="DemoTooltipBelow" title="I'm below and moved to the right">Below to the right</span>


Tooltip with an offset

      You can display the Tooltip with an offset using the following jQuery code.
    $('.DemoTooltipOffset').jBox('Tooltip', {
        offset: {
            x: 30,
            y: -5
        }
    });
---------
---------
<span class="DemoTooltipOffset" title="I have an offset">Offset</span>

Tooltip to the left

      You can display the Tooltip to the left using the following jQuery code.
     $('.DemoTooltipLeft').jBox('Tooltip', {
        position: {
            x: 'left',
            y: 'center'
        },
        outside: 'x' // Horizontal Tooltips need to change their outside position
    });
---------
---------
<span class="DemoTooltipLeft" title="To the left">To the left</span>

Tooltip to the right

      You can display the Tooltip to the right using the following jQuery code.
    $('.DemoTooltipRight').jBox('Tooltip', {
        position: {
            x: 'right',
            y: 'center'
        },
        outside: 'x' // Horizontal Tooltips need to change their outside position
    });
---------
---------
<span class="DemoTooltipRight" title="To the right">To the right</span>

Mouse following tooltips have the type "Mouse" instead of "Tooltip"

      You can display the Mouse following tooltips have the type "Mouse" instead of "Tooltip" using the following jQuery code.
     $('.DemoTooltipMouse').jBox('Mouse', {
        content: 'I will follow you'
    });
---------
---------
<span class="DemoTooltipMouse">Following your mouse pointer</span>




Example Program:- (Editor)



Output:-

Advertisement



0 comments:

Post a Comment

Total Pageviews