Creating Tooltips

  • Unknown's avatar
    anybabycan1 · Member ·

    I’m trying to create Tooltips to describe the individual services we offer. For your reference, I’m hoping to expound on items like “Children with Developmental Delays” on this page: https://austinanybabycan.wordpress.com/about/

    I was given this link in a chat http://www.menucool.com/tooltip/css-tooltip and I’m looking for help as far as how to enter this in CSS and what that would look like on the page I’m editing as well. Any help will be appreciated. Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    darrellschulte · Member ·

    Hello anybabycan1,

    You would need to add the following CSS:

    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 20px;
    margin-top:-30px; margin-left:28px;
    width:300px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}

/*CSS3 extras*/
a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}

    The next part depends on your approach to the list of services. You’re going to have to alter what you have now. Do you want it as text or images? If you’re thinking text links for Children with Developmental Delays, Children with Chronic Illnesses, etc…than you can construct the tooltip using the first example below.

    If you want to use graphics, you will have to do it on an individual basis (each service would need a graphic). You would have to upload each one and change the image location for each service (see second example).

    I would recommend just using text links for the tooltips.

    <a href="#" class="tooltip">Children with Developmental Delays
    <span>
        <img class="callout" src="http://www.menucool.com/tooltip/cssttp/callout.gif" scale="0">
ADD YOUR EXTRA TEXT
    </span>
</a>
    <a href="#" class="tooltip">
    <img src="/path/to/children-with-developmental-delays.gif" />
    <span>
        <img class="callout" src="http://www.menucool.com/tooltip/cssttp/callout.gif" />
        ADD YOUR EXTRA TEXT
    </span>
</a>

    I would also suggest that you download http://www.menucool.com/tooltip/cssttp/callout.gif and then upload it your Media Library. Once done, change the image source within the tooltip to match the new location of the image.

    It does work though. Let me know how it goes or if you have any problems along the way.

  • Unknown's avatar
    anybabycan1 · Member ·

    Great! I’m working on the text option now! I’ve modified the background color and size, but can you give me some pointers on how to adjust the text inside the box to match the smaller body font on my website? Thanks!

  • Unknown's avatar
    darrellschulte · Member ·

    Nice work. Replace a.tooltip span and a.tooltip:hover span with the following:

    a.tooltip span {
    z-index: 10;
    display: none;
    padding: 4px 14px 20px;
    margin-top: -30px;
    margin-left: 28px;
    width: 400px;
    line-height: 16px
}

a.tooltip:hover span {
    display: inline;
    position: absolute;
    border: 1px solid #DCA;
    background: #FFF
    color: #666;
    font-size: .5em;
    font-family: 'Lora', Georgia, Times, serif;
}
  • Unknown's avatar
    anybabycan1 · Member ·

    Feel free to disregard my previous post – figured the text issue out. However, i’m trying to use some special formatting for the text on the page I want to link to the tooltip; I’d like that text to appear in h5, but the text inside the box to remain as the body font (as it is currently). Any help would be appreciated.

    I’m also experimenting with the image, so I added a tester image in to try it out; it seems that when I link the image to the tooltip, the tooltip that was linked to the text is overrided. Can the same tooltip link not be used for multiple items?

  • Unknown's avatar
    darrellschulte · Member ·

    The spans are missing and the img right now…

  • Unknown's avatar
    darrellschulte · Member ·

    Hasty. The img HTML is wonky.

  • Unknown's avatar
    anybabycan1 · Member ·

    It seems that my text box hovers a bit below the image or text I’m linking it to – is there a way to adjust this?

  • Unknown's avatar
    darrellschulte · Member ·

    Looks like your HTML is awry. Fix it and I’ll have a look.

  • Unknown's avatar
    anybabycan1 · Member ·

    Hi. I’m doing my best to develop what I need here, but I’m having a lot of trouble. You’ll see that I’ve laid out my dummy images, sized to the specifications I need in a three column layout. I only need the left column to be linked to the tooltips, but I’m terrified of adding in the html in the wrong place. If you can give me any pointers, i would so very much appreciate it!

    For your reference, the html (without the tooltip) for the left column looks like:
    <div style=”width: 30%; padding: 0 10pt 0 0; float: left;”><img class=”size-full wp-image-2917 aligncenter” src=”https://austinanybabycan.files.wordpress.com/2015/01/children-with-developmental-delays2.jpg” alt=”Children with Developmental Delays” width=”500″ height=”79″ /></div>

  • Unknown's avatar
    darrellschulte · Member ·

    I took out some of the extra information from what you sent for the time being. Try adding this into your first column.

    <a href="#" class="tooltip"><img src="https://austinanybabycan.files.wordpress.com/2015/01/children-with-developmental-delays2.jpg" alt="Children with Developmental Delays" width="500" height="79" scale="0"><span><img class="callout" src="http://www.menucool.com/tooltip/cssttp/callout.gif" scale="0"> Your text here.</span></a>

    It’s pretty close, but the callout image doesn’t quite line up.

  • Unknown's avatar
    anybabycan1 · Member ·

    Thanks! While we’re on this, can you also tell me, if I want to add formatting to the text inside the box, say make one line bold, would I simply add the text in between ? And can I insert an image into the call out box?

    Thank you!

  • Unknown's avatar
    darrellschulte · Member ·

    Yes. Here’s an example.

    <a href="#" class="tooltip"><img src="https://austinanybabycan.files.wordpress.com/2015/01/children-with-developmental-delays2.jpg" alt="Children with Developmental Delays" width="500" height="79" scale="0"><span><img class="callout" src="http://www.menucool.com/tooltip/cssttp/callout.gif" scale="0"> Your <strong><em>text</em></strong> here.
<img src="https://austinanybabycan.files.wordpress.com/2015/01/2014_by-the-numbers_horizontal2.jpg?w=1816&h=234">
</span></a>

    The callout sorted itself out when the height increased.

  • Unknown's avatar
    anybabycan1 · Member ·

    Thank you for all your help with this. If you revisit the page, you’ll see the text and image I’ve added but some of the text and the image are appearing outside the call out box, and I’m uncertain where the coding error is occurring. Can you shed light on this?

  • Unknown's avatar
    anybabycan1 · Member ·

    Thank you for all your help with this. If you revisit the page, you’ll see the text and image I’ve added but some of the text and the image are appearing outside the call out box, and I’m uncertain where the coding error is occurring. Can you shed light on this?

  • Unknown's avatar
    darrellschulte · Member ·

    Did you want the added text above or below the list? Here it is above…adjust and style as necessary or move it below the listing.

    <a href="#" class="tooltip"><img src="https://austinanybabycan.files.wordpress.com/2015/01/children-with-developmental-delays2.jpg?w=544&h=86" alt="Children with Developmental Delays" width="500" height="79" originalw="500" originalh="79" src-orig="https://austinanybabycan.files.wordpress.com/2015/01/children-with-developmental-delays2.jpg?w=500&h=79" scale="2"><span><img class="callout" src="https://i0.wp.com/www.menucool.com/tooltip/cssttp/callout.gif" width="12" height="22" srcset="https://i0.wp.com/www.menucool.com/tooltip/cssttp/callout.gif?zoom=2 2x" scale="2">
Any Baby Can proudly offers some of these services in partnership with Early Childhood Intervention.<br>
<img src="https://austinanybabycan.files.wordpress.com/2015/09/newecilogofinal-2.gif?w=908" originalw="908" width="202" height="99" scale="2">
<br> <strong>Services we offer for Children with Developmental Delays include:</strong>
<ul>
<li>Home-based case management, including navigation of insurance options</li>
<li>Facilitation among parents/caregivers, school, healthcare and other professionals to create an effective advocacy team for the child</li>
<li>Emotional support</li>
<li>Coordination of medical and social service</li>
<li>Crisis assistance</li>
<li>Community resource information and referrals</li>
</ul>
</span></a>
  • Unknown's avatar
    anybabycan1 · Member ·

    `<a class=”tooltip” href=”#”><img src=”https://austinanybabycan.files.wordpress.com/2015/01/momsanddads.jpg” alt=”MomsandDads ” width=”500″ height=”79″ /><img class=”callout” src=”http://www.menucool.com/tooltip/cssttp/callout.gif” alt=”” />
    First and foremost, thank you so much for your support on this page. I have two issues I’m attempting to resolve:
    1) In the tooltag that appears when you hover over “Moms and Dads Seeking Parenting Skills”I need to link the text “View our current class schedule” to this page:https://austinanybabycan.wordpress.com/parenting-education-classes/
    Here’s the code I tried to input, but it wound up keeping some of the text, including the link, outside the tooltag:
    <strong>Moms and Dads seeking Parenting Skills</strong>
    Any Baby Can offers prenatal and parenting education classes, and family literacy services in both English and Spanish. </a><a href=”https://austinanybabycan.wordpress.com/parenting-education-classes/”>View our current class schedule.</a>
     
    To register for an upcoming class, please call 512-454-3743.
    </a>

    2) I need to realign the columns so the “How Clients Find Us” and “Services We offer” are completely in line with “Who We Serve”. These were all aligned before the complex coding was integrated, and I just need support guiding me on getting those back in alignment.

    Thank you!

  • Unknown's avatar
    anybabycan1 · Member ·

    Also, another issue that is appearing is that as I edit the other images in the two remaining columns to be linked to no content, the page shifts completely (all the tooltag information simply appears in the columns). Any suggestions to work around this would be appreciated.

  • Unknown's avatar
    anybabycan1 · Member ·

    Thank you for all your help with programming this code. If anyone can respond to my previous inquiries posted yesterday I would greatly appreciate it!

  • Unknown's avatar
    darrellschulte · Member ·

    This span tag contains a link to the class schedule. Replace what you have with this version.

    <span><img class="callout" src="https://i0.wp.com/www.menucool.com/tooltip/cssttp/callout.gif" width="12" height="22" srcset="https://i0.wp.com/www.menucool.com/tooltip/cssttp/callout.gif?zoom=2 2x" scale="2"> <strong>Moms and Dads seeking Parenting Skills</strong><br>
Any Baby Can offers prenatal and parenting education classes, and family literacy services in both English and Spanish.  <a href="https://austinanybabycan.wordpress.com/parenting-education-classes/">View our current class schedule</a>.
<br>
To register for an upcoming class, please call 512-454-3743.<br>
</span>

    For your second question, let’s have you try to put a tooltip in that column and see if that impacts the alignment (hopefully for the better).

    Please be patient and resist the temptation to bump your topic.

1 2
  • The topic ‘Creating Tooltips’ is closed to new replies.