Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Simple JQuery Tooltips turtorial</title>
- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
- <script type="text/javascript">
- var options = {
- hideCursor: false,
- offsetX: 0.5,
- offsetY: 15,
- fadeInAnimationDuration: 'fast',
- opacity: 0.8,
- opacityAnimationDuration: 100,
- maxWidth: 180,
- tailSize: 5
- };
- $(document).ready(function() {
- var tooltipClass = 'default';
- //Select all anchor tag with rel set to tooltip
- $('a[title]:not([title=""])').mouseover(function(e) {
- //Grab the title attribute's value and assign it to a variable
- var tip = $(this).attr('title');
- //Remove the title attribute's to avoid the native tooltip from the browser
- $(this).attr('title','');
- tooltipClass = getTooltipClass($(this));
- //Append the tooltip template and its value
- $(this).append('<div id="tooltip"><div id="tail" /><div class="' + tooltipClass + '">' + tip + '</div></div>');
- console.log('<div id="tooltip"><div id="tail" /><div class="' + tooltipClass + '">' + tip + '</div></div>');
- if ($('#tooltip').width() > options['maxWidth']) {
- $('#tooltip').width(options['maxWidth'] + 'px');
- }
- $('#tail').css('border-width', options['tailSize'] + 'px');
- $('#tail').css('top', -options['tailSize'] * 2 + 'px');
- //Set the X and Y axis of the tooltip
- setTooltipPosition(e);
- //Show the tooltip with faceIn effect
- $('#tooltip').fadeIn(options['fadeInAnimationDuration']);
- $('#tooltip').fadeTo(options['opacityAnimationDuration'], options['opacity']);
- if (options['hideCursor']) {
- $(this).css({cursor: 'none'});
- }
- }).mousemove(function(e) {
- //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
- setTooltipPosition(e);
- }).mouseout(function(e) {
- //Put back the title attribute's value
- $(this).attr('title',$('.' + tooltipClass).html());
- //Remove the appended tooltip template
- $(this).children('div#tooltip').remove();
- $(this).css({cursor: 'default'});
- if (options['hideCursor']) {
- $(this).css({cursor: 'default'});
- }
- });
- });
- function setTooltipPosition(e) {
- $('#tooltip').css('top', e.pageY + options['offsetY']);
- var offsetX = $('#tooltip').outerWidth() * options['offsetX'];
- $('#tooltip').css('left', e.pageX - offsetX);
- $('#tail').css('left', offsetX - $('#tail').outerWidth()/2);
- }
- function getTooltipClass(e) {
- //aside
- if ($('aside').find(e).length > 0) {
- return 'typA';
- } else if ($('section.content').find(e).length > 0) {
- return 'typB';
- }
- return 'default';
- }
- </script>
- <style>
- body {font-family:arial;font-size:12px;text-align:center;}
- div#paragraph {width:300px;margin:0 auto;text-align:left}
- a {color:#aaa;text-decoration:none;cursor:pointer;cursor:hand}
- a:hover {color:#000;text-decoration:none;}
- /* Tooltip */
- #tooltip {
- position:absolute;
- z-index:9999;
- color:#fff;
- font-size:10px;
- display: none;
- }
- #tail {
- position:absolute;
- width: 0px;
- height: 0px;
- border: 10px solid;
- border-color: transparent transparent #000 transparent;
- left: 45%;
- top: -20px;
- }
- #tooltip .default {
- background-color:#000;
- padding:5px;
- }
- #tooltip .typA {
- background-color: red;
- padding: 5px;
- }
- #tooltip .typB {
- background-color: yellow;
- padding: 5px;
- }
- </style>
- </head>
- <body>
- <aside>
- <a title="AAAA">a</a>
- </aside>
- <section class="content">
- <a title="AAAA">b</a>
- </section>
- <div id="paragraph">
- A paragraph typically consists of a unifying main point, thought, or idea accompanied by supporting details. The non-fiction paragraph usually begins with the general and moves towards the more specific so as to advance an argument or point of view. Each <a title="A paragraph typically consists of a unifying main point, thought, or idea accompanied by <b>supporting details</b>">paragraph</a> builds on what came before and lays the ground for what comes next. Paragraphs generally range three to seven sentences all combined in a single paragraphed statement. In prose fiction successive details, for example; but it is just as common for the point of a prose paragraph to occur in the middle or the end. A paragraph can be as short as one word or run the length of multiple pages, and may consist of one or many <a rel="tooltip" title="Testing of Sentences">sentences</a>. When dialogue is being quoted in fiction, a new paragraph is used each time the person being quoted changed.
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement