MooTooltips – easy to make good looking tooltips

MooTooltips – easy to make good looking tooltips

Friday, March 13th, 2009 in Mootools, PHP

MooTools cool tooltips MooTooltips gives you the possibility to create bubble tooltips on HTML elements in an easy manner and with the possibility to set each tooltip’s behavior individually. It’s also possible to display as tooltip content the content of an HTML element from the page, some text you want to input or the result of AJAX calls.

Tooltips can be set directly on the rel parameter of any HTML element and simultaneously when you create a new class instance.

For example, if tooltips are set directly on the element (let’s say an anchor), the rel parameter will have a value like: <a … rel=”{content:’some_element_id’}” and that’s it. The tooltip displayed will have as content the ‘some_element_id’ content. Or if you there’s only the need to display some text, it will look like this: <a … rel=”{text:’Some text I want to display in my tooltip’}”. AJAX calls are also simple. To display the tooltip with some remote AJAX retrieved content, simply use as rel the following: <a … rel=”{ajax:’some_page.html’}”.

To start the inline declared tooltips, a CSS selector is needed so basically all tooltips declared on page must have the same CSS class in order to get the script started. Optionally, there’s the possibility the pass a container for the tooltips; if none is provided, the script will scan the entire document.

There are some more parameters that can be set on the element. The tooltip can be displayed on top of the element calling it or below it. To change the position, there’s a parameter called position that can be set with the values 1 (below the element) or -1(on top of the element).
One other this you could do is set the tooltip as sticky. To do that, set sticky:true on the element or the extra elements declared where you start the script.

Below is the complete list of parameters you can set:

  • container: for inline declared tooltips, if you specify the container id, the script will search for tooltips in there; if not specified, it will scan the entire document if you provide it a CSS selector for the hovered parameter
  • hovered: CSS selector for the tooltip elements. The css class is for the elements that display the tooltip when they are hovered
  • extra: this parameter contains the elements you choose to manually add. To add extra elements, set this parameter as:

    extra:{
        0: {
            ’id’:'extra’,
            ’text’:'this text is added manually using the extra.text parameter.’,
            ’position’:-1,
            ’sticky’:false
        },
        1: {
            ’id’:'other_extra’,
            ’ajax’:'ajax.php’,
            ’ajax_message’: ‘Loading… please wait.’,
            ’position’:1,
            ’sticky’:false
        }
    }

    As you can see, for each element add to the extra parameter, you need to pass a few things. Except for the id, all the other parameters on each element are the same as the ones used on the inline declared elements.

  • ToolTipClass: CSS class for the tooltips. This is a global parameter, all tooltips declared within a class instance will have the same CSS class. The tooltip HTML structure is as follows:

    <div class="someCLass">
        <div class="dockBottomHeader">This is the header.</div>
        <div class="message">This is where the content is displayed.</div>
        <div class="dockBottomFooter">This is the footer.</div>
    </div>

    Except for the container CSS class ( this parameter’s value ), all other classes must be kept in the stylesheet. Also, the close buton CSS class must remain as is ( .sticky_close ) and the AJAX preloader class ( .loading ).

  • toolTipPosition: besides setting the tooltip position on each element, you can use this parameter to define a default position for all the tooltips. This way, if one of the elements doesn’t have a position set, this one will be used. It can take as values -1 (on top) or 1 (on bottom)
  • showDelay: tooltips can be delayed on showing. Basically, this will prevent the tooltips to display if the user passes the cursor over to get to another element, without the intention to hover the element having the tooltip.
  • sticky: same as toolTipPosition, you can set this parameter to be the default value if sticky is not set on any of the elements that must display tooltips
  • fromTop: distance in pixels from the element. By default, the tooltip takes as coordinates the element coordinates. If you need to display it a little further from the element, give this parameter a value. This applies to all tooltips declared on a class instance
  • fromLeft: same as fromTop, but it controls the horizontal position of the tooltip
  • duration: the tooltips fading/moving duration in milliseconds. Applied to all tooltips declared on a class instance.
  • fadeDistance: on mouse out or close, the tooltip fades and moves away from the element. This variable determines how far from the element it will move.

Giving the fact that the tooltips can be positioned on top or bottom of the elements calling them, if by design they point at the element, the script will need to do some changes. As stated above, the inner divs for the tooltip header, message and footer have the CSS classes predetermined and I suggest not to change their names. When the tooltip displays below the element, it will have to point up. In the example page, the below display is set as default. For the tooltips displaying above the element, there are separate CSS classes that are switched for the default ones to make the tooltip point down at the element calling it. These CSS classes are: dockTopHeader and dockTopFooter and must have the same name in your stylesheet.

If you post any bugs, please specify the browser name/version you encountered problems with.

Was this useful? Show your support.

digg MooTooltips – easy to make good looking tooltips

107 comments

  1. Eclectic says:

    Hi Constantin, first of all thanks for your contribution.
    Unfortunately I have a problem:
    I am developing an application for Joomla 1.6, and first tried your code in a module and works perfectly, but when I transfer to a component it fails and I get the following JavaScript errors:
    -Class is not defined (at Mootooltips.js file)
    -window.addEvent is not a function (at script.js file)

    Any idea, thanks in advance.

    • Can’t say for sure but check and see if all files get included in your page (mootools files too).

      • Eclectic says:

        Solved!
        All files were included, the problem was that the inclusions (by the method ‘addScript’) I did ​​them in the entry point file of the component as I did at the module, was did them in the default.php file of the view and problem solved.
        Now it works perfectly, and I have good looking tooltips. ;)
        Thanks for everything Constantin.

  2. Eclectic says:

    Hi Constantin,
    I have a question, it’s possible to trigger the tooltip with onclick event instead of mouseover in an anchor ?
    And if so, how can I do ?
    Thanks.

  3. harsha says:

    I want code for this..

  4. Eclectic says:

    Hi Constantin,
    I don’t know if you saw my question of 17 August, so I will repeat it:
    it’s possible to trigger the tooltip with onclick event instead of mouseover in an anchor ?
    And if so, how can I do ?
    Please, get me out of doubt.
    Thanks in advance.

  5. paul says:

    was wondering about repeating a tooltip on several a titles on the page, at the moment the tooltip fires once on the first element then wont fire again. any ideas would be great.

    thanks in advance

  6. paul says:

    sorry i dont have a link at the moment, i was just wanting to make the same tooltip appear on multiple items
    for example, i have a page loading multiple images all with a link with links each image ideally should have a tooltip that says view this item, is it possible to make the tooltip on all items from one instance in javascript if that makes sence!

    Thanks again

  7. paul says:

    i have found a solution to my problem, i simple wrapped my actice elements in a <div id="item->title); $tmp ?>”………..which output seperate titles for all my items so i can now tailor my tips to suit.

  8. Sergiu C. says:

    Hello ,

    Thank you for sharing the script with us . I was trying to embed via ajax a tweeter widget (latest tweets script), and it is not working ? do you have any ideas

  9. Joe says:

    Hi, under what licence do you publish this script?

Leave a comment