SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML Feature (something)

    What do you call that whereas when you have a anchor a little yellow pop up with a name ? If anyone has an example so that I can relate to what I'm exactly looking for, and can you change the text size of the words ?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    What you have written is almost incomprehensible. Do you mean tooltips?

  3. #3
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Sounds like the title attribute e.g.

    <a href="http://www.sitepoint.com/forums" title="SitePoint Forums">Link text</a>

    There's nothing in the HTML or CSS spec to style the title attribute, but you could use javascript. jQuery Cluetip for example.

  4. #4
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is exactly what I'm referring too Victor, I want to apply it to just an anchor

  5. #5
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Well, the Cluetip documentation is quite thorough and if you have problems, I believe the developer participates in the jQuery forum.

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Code HTML 4.01 Strict:
    <a href="http://www.foo.com" title="Foo">Link to Foo</a>

    Your basic tooltip. If you do a Google search on formatting tooltips with CSS, JavaScript, or whatever you prefer, you will find numerous ways of styling and presenting tooltips. ClueTip is one nice way to do it, though there are simpler methods out there.

  7. #7
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The documentation is clear, although I'm trying to do something simple it states
    for the jQuery

    $('a.title').cluetip({splitTitle: '|'});
    I put that in the <head> then the documentation states

    <a class="title" href="#" title="This is the title|The first set of contents comes after the first delimiter in the title.|In this case, the delimiter is a pipe">
    Alright so I've got an anchor in a <div>with a <ul id> with a .class then a so I put in the code as such:
    <script type="text/javascript">$(#masterhome #nav .home a.home').cluetip({splitTitle: '|'}); </script>
    That doesn't work, and yes I have jQuery already in the page pointing to it's correct path.

  8. #8
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    To be honest, it's not very clear to me. How about putting an example online and posting in the javascript section? There may be more jQuery/Cluetip experts on hand there.

  9. #9
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Help

    I'm having some problems getting jQuery ClueTip to work, the documentation is clear but I'm still a bit confused. The documentation states to put this code in the <HEAD> which I've done.

    [QUOTE]
    $('a.title').cluetip({splitTitle: '|'});

    <a class="title" href="#" title="This is the title|The first set of contents comes after the first delimiter in the title.|In this case, the delimiter is a pipe">
    Alright so I've got an anchor in a <div>with a <ul id> with a .class then a so I put in the code as such in the <HEAD>

    <script type="text/javascript">$(#masterhome #nav .home a.home').cluetip({splitTitle: '|'}); </script>
    I have the path for jQuery within my page but it's not working?

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It could also be related to where SH has put that <script>, and whether it's at the bottom of the body or not (since there is no $(function() { ...}) or $(document).ready(...) wrapper.

  11. #11
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've posted a message in the JavaScript forum.

  12. #12
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Please put an example online.

  13. #13
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You need this in the <head> section:
    Code HTML4Strict:
    <script type="text/javascript" src="jquery.js"></script>
    <script src="cluetip/jquery.cluetip.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$('a.title').cluetip({splitTitle: '|'});      
    });
    </script>
    Then you need to add a class of 'title' to any links you want this to appear on:
    Code HTML4Strict:
    <a class="title" href="#" title="This is the heading|This is the body content of the pop up">Link</a>
    You will need to adjust the paths to the javascript files to match your setup. Alternately you can move this to an external file called whatever.js and then link to it from the <head> section as well.
    Code JavaScript:
    $(document).ready(function() {
    	$('a.title').cluetip({splitTitle: '|'});      
    });
    Hope it helps.

  14. #14
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it working
    Last edited by SiberianHuskey; Mar 28, 2010 at 08:54. Reason: Solved Problemo ! Amigo

  15. #15
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now it's just changing the background color for the text do you have to link to the CSS file?

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Threads merged - please don't start two threads on the same topic. Just ask an advisor to move the thread to the correct forum

  17. #17
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh good, this makes it more easier

  18. #18
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Now it's just changing the background color for the text do you have to link to the CSS file?
    Just change the actual CSS file you're including for this feature. That is, unless you want it to change upon a certain event.

  19. #19
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Now it's just changing the background color for the text do you have to link to the CSS file?
    Yes you will need some CSS to make it pretty. The .css file came with the .zip download. It has all the .css for every possibility (feature it offers).

  20. #20
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's how to blend the CSS with the specific anchor.

    Tell me if I'm in the right direction

    #<div> .title {
    background: #FFFFFF
    }

  21. #21
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    It's how to blend the CSS with the specific anchor.

    Tell me if I'm in the right direction

    #<div> .title {
    background: #FFFFFF
    }
    Nope not quite. Here is the HTML generated by this plug in:

    Code HTML4Strict:
    <!-- this is for the loading image -->
    <div style="position: absolute; display: none;" id="cluetip-waitimage"></div>
     
    <!-- outer wrap -->
     <div class="" style="display: none; position: absolute; width: 275px; left: 81px; z-index: 97; top: 2px;" id="cluetip">
     
     <!-- I am guessing this is for the shadow -->
      <div style="z-index: 96; opacity: 0.1; top: 1px; left: 1px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
      <div style="z-index: 96; opacity: 0.1; top: 2px; left: 2px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
      <div style="z-index: 96; opacity: 0.1; top: 3px; left: 3px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
      <div style="z-index: 96; opacity: 0.1; top: 4px; left: 4px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
      <div style="z-index: 96; opacity: 0.1; top: 5px; left: 5px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
      <div style="z-index: 96; opacity: 0.1; top: 6px; left: 6px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
     
      <!-- this is the actual content title/description -->
       <div style="position: relative; z-index: 97; overflow: visible; height: auto;" id="cluetip-outer">
        <h3 id="cluetip-title">This is the title</h3>
        <div id="cluetip-inner">The first set of contents comes after the first delimiter in the title. In this case, the delimiter is a pipe</div>
       </div>
     
       <!-- not sure what this is for but I think it is the rounded corner option -->
       <div id="cluetip-extra"></div>
     
      <!-- this is for the arrow(s) -->
       <div style="z-index: 98; display: none;" id="cluetip-arrows" class="cluetip-arrows"></div>
     
     </div>
    You can find an example of the necessary .css selectors in the jquery.cluetip.css file in the cluetip folder.

  22. #22
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    /***************************************
       =cluetipClass: 'default'
    -------------------------------------- */
     
    .cluetip-default {
      background-color: #d9d9c2;
    }
    .cluetip-default #cluetip-outer {
      position: relative;
      margin: 0;
      background-color: #d9d9c2;
    }
    .cluetip-default h3#cluetip-title {
      margin: 0 0 5px;
      padding: 8px 10px 4px;
      font-size: 1.1em;
      font-weight: normal;
      background-color: #87876a;
      color: #fff;
    }
    .cluetip-default #cluetip-title a {
      color: #d9d9c2;
      font-size: 0.95em;
    }
    .cluetip-default #cluetip-inner {
      padding: 10px;
    }
    .cluetip-default div#cluetip-close {
      text-align: right;
      margin: 0 5px 5px;
      color: #900;
    }

    That is what I was going by... can't be where I have to put all that HTML into my code

  23. #23
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Doesn't this give you a hint?

    Code css:
    .cluetip-default h3#cluetip-title {
      margin: 0 0 5px;
      padding: 8px 10px 4px;
      font-size: 1.1em;
      font-weight: normal;
      background-color: #87876a; /* HINT */
      color: #fff;
    }

  24. #24
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <div id="masterhome><a class="title" href="#" title="blah blah blah"></a></div>

    for the CSS

    Code CSS:
    .cluetip-default a .title {
      margin: 0 0 5px;
      padding: 8px 10px 4px;
      font-size: 1.1em;
      font-weight: normal;
      background-color: #87876a; /* HINT */
      color: #fff;
    }

  25. #25
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Just copy that .css file into your css directory and then link to it from the <head> with:
    Code HTML4Strict:
    <link rel="stylesheet" type="text/css" media="screen" href="css/jquery.cluetip.css" />.
    Then alter the already existing values to what you want. What features of this thing do you want to use? This will determine what parts of the css are required and need to be edited, but to just change the colors and the text you can edit these 2:

    Starts on line 38 of jquery.cluetip.css
    Code CSS:
    .cluetip-default #cluetip-outer {
      position: relative;
      margin: 0;
      background-color: #d9d9c2;
    }
    .cluetip-default h3#cluetip-title {
      margin: 0 0 5px;
      padding: 8px 10px 4px;
      font-size: 1.1em;
      font-weight: normal;
      background-color: #87876a;
      color: #fff;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •