Simple?? onClick qTip some links but not all

StackOverflow https://stackoverflow.com/questions/18063436

Question

I would like to qtip some links but not all,

each link is different

here is a example of the NON Working code,

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
        <head>
          <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
          <title>qTip2 - My test case - jsFiddle demo</title>

          <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>

          <link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
          <link rel="stylesheet" type="text/css" href="/css/result-light.css"/>


    <script type='text/javascript' src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
    <link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css"/>


    <style type='text/css'>
            body{
            padding: 50px;
        }    
        .qtip-wiki{
            max-width: 385px;
        }    
        .qtip-wiki p{
            margin: 0 0 6px;
        }    
        .qtip-wiki h1{
            font-size: 20px;
            line-height: 1.1;
            margin: 0 0 5px;
        }
        .qtip-wiki img{
            float: left;
            margin: 10px 10px 10px 0;
        }
        .qtip-wiki .info{
            overflow: hidden;
        }
        .qtip-wiki p.note{
            font-weight: 700;
        }
    </style>


        <script type='text/javascript'>//<![CDATA[ 
        $(window).load(function(){
        // Create the tooltips only when document ready
         $(document).ready(function()
         {
             // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
             $('a').each(function() {
                 $(this).qtip({
                    content: {
                        text: 'Loading...',
                        ajax: {
                            url: 'http://qtip2.com/demos/data/snowyowl', 
                            loading: false
                        }
                    },
                    position: {
                        viewport: $(window)
                    },
                    style: 'qtip-wiki'
                 });
             });
         });
        });//]]>  

        </script>


        </head>
        <body>
          <a href='non_QTip_Link.php' target='_blank'>Snowy Owl 0</a>
        <br><br>
        <a href='qtip_link_Yes1.php' onclick=$qTIPThisLink>Snowy Owl 1</a>
        <a href='non_QTip_Link.php'>Snowy Owl 00</a>
        <br><br>
        <a href='qtip_link_Yes2.php' onclick=$qTIPThisLink>Snowy Owl 2</a>           
        </body>
        </html>

I would like to replace: url: 'http://qtip2.com/demos/data/snowyowl', with the URL that was clicked and place it here and if the onclick was not fired then Qtip would not trigger as well.

I found a example at http://jsfiddle.net/craga89/L6yq3/ but it loads only one link using the same URL and it looks as if it will qTip all of the 'A' href's on the page I don't want it to do that and it also fires on mouseover I want it onclick only because I don't want to load the page until the user clicks the link.

Était-ce utile?

La solution

You can give the a tags that you want to have qtip a class like:

<a href='....' class='qtip-link'> LINK </a>

Then you can add the following javascript:

<script type='text/javascript'>

   $(document).ready(function() {
    $('.qtip-link').each(function() {
             $(this).click(function() {
               return false; //disables the the link from redirecting
             });

             var linkUrl = $(this).attr("href"); //gets the url from the link
             $(this).qtip({
                content: {
                    text: 'Loading...',
                    ajax: {
                        url: linkUrl, 
                        loading: false
                    }
                },
                position: {
                    viewport: $(window)
                },
                style: 'qtip-wiki',
                show: 'click' //this will let the qtip only show when the link is clicked
             });
         });
    });


   });
</script>

Hope this is what you wanted :)

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top