Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Help With CSS Tooltip

    I've created a CSS tooltip, however, I am trying to put linked images within the tooltip. I was able to get the images in okay but, I can't seem to figure out how to add links to those images. I have tried using <a> tags around the <img> tag but this is removing the data from the tooltip altogether and placing it beside the tooltip trigger image. To be clear, I am not very adept at coding outside of basic html but, I am trying to learn. Please be as specific as possible with any replies. Thank you in advance with any assistance you might be able to give me.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    a.tooltip {outline:none; }
    a.tooltip strong {line-height:30px;}
    a.tooltip:hover {text-decoration:none;}
    a.tooltip span {
    z-index:10;display:none; padding:14px 10px;
    margin-top:50px; margin-left:-90px;
    width:150px; height:150px; line-height:16px;
    }
    a.tooltip:hover span{
    display:inline; position:absolute;
    border:2px solid #009933; color:#EEE;
    background:#000 url(src/css-tooltip-gradient-bg.png) repeat-x 0 0;
    }
    .callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}

    /*CSS3 extras*/
    a.tooltip span
    {
    border-radius:2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;

    -moz-box-shadow: 0px 0px 8px 4px #666;
    -webkit-box-shadow: 0px 0px 8px 4px #666;
    box-shadow: 0px 0px 8px 4px #666;

    opacity: 0.8;
    }


    </style>
    </head>
    <body>
    <a class="tooltip" href="http://bit.ly/1nTPTrp"><img src="http://i1314.photobucket.com/albums/t563/RTH13/T1Elite11_zps6baabe98.png"border="0" width="100" height="50"/>
    <span><strong>Tier 1 Elite Hockey</strong>
    <img src="http://i1314.photobucket.com/albums/t563/RTH13/9430b633-a1b9-4146-ba77-6e82e999efa2_zpsbdf7915c.png"border="0" width="35" height="35" alt="Belle Tire Hockey Club" title="Belle Tire Hockey Club"/> <img src="http://i1314.photobucket.com/albums/t563/RTH13/ChicagoFuryLogo2_zpse81af01c.png"border="0" width="35" height="35" alt="Chicago Fury" title="Chicago Fury"/> <img src="http://i1314.photobucket.com/albums/t563/RTH13/ClevelandBaronsLogo2_zpsb67290dc.png"border="0" width="35" height="35" alt="Cleveland Barons" title="Cleveland Barons"/></span>
    </body>
    </html>

    </html>

  • #2
    New Coder
    Join Date
    Jun 2005
    Location
    Blackpool. UK
    Posts
    98
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Put the image and the link in the element that is the "tooltip"
    Chris

    Indifference will be the downfall of mankind, but who cares?

  • #3
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the response Chris but, what exactly do you mean by that? As I said, I'm a bit of a novice at this so, I apologize. This is what I had been trying:

    <a> href="http://www.realtimehockey.net" target="_blank <img src="http://i1314.photobucket.com/albums/t563/RTH13/9430b633-a1b9-4146-ba77-6e82e999efa2_zpsbdf7915c.png"border="0" width="35" height="35" alt="Belle Tire Hockey Club" title="Belle Tire Hockey Club"/></a>

    If you could explain a little further as to exactly where I should place this, I would appreciate it. Thanks again.


  •  

    Tags for this Thread

    Posting Permissions

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