Results 1 to 13 of 13

Thread: CSS Tooltip

  1. #1
    Platinum Lounger
    Join Date
    Nov 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    5,016
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Tooltip

    Being conversant with only prehistoric HTML, I'm wanting to use some "inbuilt" functionality of a CSS file to incorporate a tooltip in my page. I'm using the Joomla CMS software, and can find all sorts of hi-tech esoteric articles on tooltips, but not the basics. I'm sure it's fairly simple, but I just can't find the basic code/syntax - this is the code in the CSS:
    <code>
    /* Tooltips */

    .tool-tip {
    float: left;
    background: #ffc;
    border: 1px solid #D4D5AA;
    padding: 5px;
    max-width: 200px;
    }

    .tool-title {
    padding: 0;
    margin: 0;
    font-size: 100%;
    font-weight: bold;
    margin-top: -15px;
    padding-top: 15px;
    padding-bottom: 5px;
    background: url(../../system/images/selector-arrow.png) no-repeat;
    }

    .tool-text {
    font-size: 100%;
    margin: 0;
    }</code>

    What HTML do I need to display a tooltip over a word or phrase in the webpage?

    Alan

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: CSS Tooltip

    I think the most basic level is to use the title attribute:

    <code>

    Come to <span title="Woody's Lounge">the Lounge</span> for tips.</p></code>

    Working backwards from your CSS excerpt, it appears that, ummm, there might be something missing... some classes with the :hover pseudoclass, for example, or maybe there is a JavaScript onmouseover handler in the mix somewhere?

    {Extensive Googling...}

    It appears that Joomla has a script that checks for spans with the class name "hasTip" and then enhances the titles for those spans. This appears to be the format (where you put a heading and body text in the title, delimited with a double colon):

    <code>

    Come to <span class="hasTip" title="What Lounge?::Woody's Lounge">the Lounge</span> for tips.</p></code>

    Does that work?

    This mysterious page might or might not help: Joomla! View topic - [Tutorial Draft] Tooltips.

  3. #3
    Platinum Lounger
    Join Date
    Nov 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    5,016
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS Tooltip

    <P ID="edit" class=small>(Edited by AlanMiller on 29-Nov-08 23:45. )</P>Thanks for your efforts Jefferson... but to no avail I'm afraid. <img src=/S/sad.gif border=0 alt=sad width=15 height=15>

    Like all of my attempts/ guesses, your suggested tags were parsed out and only plain text resulted. I too did extensive Googling (a day's worth in fact) and was led to all sorts of weird and wonderful tricks & techniques, but never to an explanation of the basics. I'm glad it's not just me! One page I stumbled upon stated that the tooltip functionality was all "inbuilt" for Joomla 1.5 so I was assuming that the CSS styles I showed above were all ready to go, straight out of the box.

    I'm trying to set up this site for a colleague, but have already wasted a day trying to find just one simple method. If this is an indication of the un-usability of Joomla, I might search for something more usable or pass the project to a web developer. The Joomla forums have also provided no answers. I hate to say it sometimes but... such is GNU open source.

    Alan

    Edit: Sorry, forgot to attach the full CSS file.
    Attached Files Attached Files

  4. #4
    2 Star Lounger
    Join Date
    Aug 2004
    Location
    Withyham, Sussex, England
    Posts
    121
    Thanks
    2
    Thanked 1 Time in 1 Post

    Re: CSS Tooltip

    Good day Alan, If you install this plugin to joomla it will automatically create the tool tips that you require. http://community.blogiwiki.com/component/o...d,22/Itemid,46/
    If you have the time to read the getting started guides for Joomla I belive you will find it will do all that you require and a great deal more.cheers gws.

  5. #5
    Platinum Lounger
    Join Date
    Nov 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    5,016
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS Tooltip

    Thank you for that link. I registered there and downloaded the plugin. I have followed the author's instructions at Just created Bubble Tooltip plugin:

    "Simply go to Administration Site -> Install/Uninstall; then upload the .zip file. Then you have to activate the plugin in the plugin manager. This is standard procedure. Once it is activated, you can apply those fancy bubbles to your links, assigning them to the CSS group "bubbletooltip":

    <a h r e f="#" class="bubbletooltip" title="Bubble text goes here...">Touch me!</ a>

    You can customize the design via the provided .css file.
    "

    I guess I must be missing something still, because the "title" is only displayed as it would be in standard HTML. I receive the following errors when I insert such a link and display the page:
    <hr>JDispatcher::register: Event handler not recognized.

    Warning: preg_replace() [function.preg-replace]: Empty regular expression in C:xampphtdocsjoomlapluginscontentBWbubbletooltips. php on line 27
    <hr>
    I'm still in the dark I'm afraid.

    Alan

  6. #6
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS Tooltip

    ... and what is the code on line 27?
    Jerry

  7. #7
    2 Star Lounger
    Join Date
    Aug 2004
    Location
    Withyham, Sussex, England
    Posts
    121
    Thanks
    2
    Thanked 1 Time in 1 Post

    Re: CSS Tooltip

    Sorry Alan, I sent you to a duff plugin, the xml file is damaged. I have just installed a vanilla joomla install at www.travelling-planet.com with an example of an overlib tooltips working. You can download the plugin from http://www.aqsg.com.au/downloads/sim...ib-plugin.html Hope that works for you.cheers gws.

  8. #8
    Platinum Lounger
    Join Date
    Nov 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    5,016
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS Tooltip

    // check whether plugin has been unpublished
    if (!$plugin->published) {
    $row->text = preg_replace( $regex, '', $row->text );

    Alan

  9. #9
    Platinum Lounger
    Join Date
    Nov 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    5,016
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS Tooltip

    Thank you for your help once again. I can see the popup working fine on your site. I'm afraid it still won't work for me on localhost. I have installed the plugin and have it enabled (not sure how/if I should set its "order" value though). I'm using the TinyMCE editor to insert the code:
    <code>
    { overlib }This is a basic popup:This is the text that will appear inside the popup:Basic Popup Example{ /overlib }
    </code>
    directly into the HTML. It only appears as the literal text in the site page though. I guess I'm still missing something.

    Alan

  10. #10
    2 Star Lounger
    Join Date
    Aug 2004
    Location
    Withyham, Sussex, England
    Posts
    121
    Thanks
    2
    Thanked 1 Time in 1 Post

    Re: CSS Tooltip

    Hi Alan, in your example you have a space between the curly braces { overlib } it will not work if you have spaces. The order value is not important for this plugin. Cheers Graham

  11. #11
    Platinum Lounger
    Join Date
    Nov 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    5,016
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS Tooltip

    Sorry. Those spaces next to the curly brackets are just from a copied code demo. They are not there in my actual code. But I still can't get it to work. This is the HTML for the page:
    <code>


    Home page of site. </p>{overlib}This is a basic popup:This is the text that will appear inside the popup:Basic Popup Example{/overlib}
    </code>

    Alan

  12. #12
    2 Star Lounger
    Join Date
    Aug 2004
    Location
    Withyham, Sussex, England
    Posts
    121
    Thanks
    2
    Thanked 1 Time in 1 Post

    Re: CSS Tooltip

    Hi Alan, I can only guess it is a problem with xamp, can you test it on a live server? cheers gws

  13. #13
    Platinum Lounger
    Join Date
    Nov 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    5,016
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS Tooltip

    Success at last! I had the "Legacy" plugin installed for trying some of the v1.0 popup plugins (also without success). When I removed it, bingo! Thanks very much for your help on this Graham. <img src=/S/thankyou.gif border=0 alt=thankyou width=40 height=15>

    Alan

Posting Permissions

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