Examples for Tooltips

Syntax

Only text

Simply place the text you want to show in the tooltip inside the {tip} opening tag. Place the text of the 'link' you want people to hover over between the {tip} opening and {/tip} closing tag.

{tip The tooltip text goes here}Hover over me!{/tip}

Title and text

To create a tooltip with a title, use the title parameter, like:

{tip title="A nicely styled title" content="This text will appear in the tooltip"}You can give tooltips a title{/tip}

Only a title

{tip title="A nicely styled title"}Only show the title{/tip}

Syntax

{tip title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa." content="Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Nullam dictum felis eu pede mollis pretium.

Integer tincidunt

• Cras dapibus.
• Vivamus elementum semper nisi.

Aenean vulputate eleifend tellus."}You can simply add markup to any word inside the link and the tooltip{/_tip}

Syntax

Tooltips comes with a number of global styling options, like border color, background colors, text colors, etc. These will affect all tips on your site.

Tooltips comes with a number of ready styled classes based on the Bootstrap colors.

Color Classes

Tabs' stylesheet comes with styling for the classes blue, green, orange, red and gray / grey.

{tip title="Tooltip Title" content="Tooltip text..." class="blue"}blue{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="green"}green{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="orange"}orange{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="red"}red{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="gray"}gray{/tip} / {tip title="Tooltip Title" content="Tooltip text..." class="grey"}grey{/tip}

Bootstrap Classes

You can also use the Bootstrap classes primary, info, success, warning and danger / error.

{tip title="Tooltip Title" content="Tooltip text..." class="primary"}primary{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="info"}info{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="success"}success{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="warning"}warning{/tip} | {tip title="Tooltip Title" content="Tooltip text..." class="danger"}danger{/tip} / {tip title="Tooltip Title" content="Tooltip text..." class="error"}error{/tip}

Custom Styling

The classname you add, will be added to both the link text element and the tooltip element. So you can use CSS to style it like you want.

{tip title="Tooltip Title" content="Tooltip text..." class="mystyle"}My custom styled tooltip{/tip}

CSS styling for 'mystyle':

span.tooltips-link.mystyle {
    border: 1px solid #999999;
    background-color: #EEEEEE;
    padding: 3px 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
div.popover.mystyle {
    background-color: #339933;
    color: #FFFFFF;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
div.popover.mystyle .arrow {
    border-top-color: #339933;
}
div.popover.mystyle .popover-title {
    background-color: #FFFFFF;
    color: #339933;
    font-size: 1.5em;
    font-weight: bold;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Syntax

You can simply place the thumbnail images in your editor and surround them with the {tip} tags.

You can then use the image parameters to define the image for inside the tooltip.

{tip image="images/fruit/apple.jpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/banana.jpgjpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/blueberry.jpgjpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/strawberry.jpgjpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/orange.jpgjpg" image_height="150" image_width="200"}{/tip} {tip image="images/fruit/lime.jpgjpg" image_height="150" image_width="200"}{/tip}

You can also simply place the large images right inside the content parameters using your editor.

{tip content=""}{/tip} {tip content=""}{/tip} {tip content=""}{/tip} {tip content=""}{/tip} {tip content=""}{/tip} {tip content=""}{/tip}

Or place the html in the content parameters, instead of the large images. However, that can get a little confusing, as you get weird nested quotes:

{tip content="<img src="/images/fruit/apple.jpg" height="150" width="200" />"}{/tip} {tip content="<img src="/images/fruit/banana.jpg" height="150" width="200" />"}{/tip} {tip content="<img src="/images/fruit/blueberry.jpg" height="150" width="200" />"}{/tip} {tip content="<img src="/images/fruit/strawberry.jpg" height="150" width="200" />"}{/tip} {tip content="<img src="/images/fruit/orange.jpg" height="150" width="200" />"}{/tip} {tip content="<img src="/images/fruit/lime.jpg" height="150" width="200" />"}{/tip}

Syntax

In the Pro version of Tooltips you have the option to set the positioning of the tooltips.

There is a global option that will affect all tooltips. But you can also overrule this in the {tip} tag. You can just add a position parameter with the value left, right, top or bottom.

{tip title="Tooltip Title" content="Tooltip text..." position="left"}Left{/tip}
{tip title="Tooltip Title" content="Tooltip text..." position="right"}Right{/tip}
{tip title="Tooltip Title" content="Tooltip text..." position="top"}Top{/tip}
{tip title="Tooltip Title" content="Tooltip text..." position="bottom"}Bottom{/tip}

Syntax

In the Pro version of Tooltips you set the tooltips to show on click instead of hover.

There is a global option that will affect all tooltips. But you can also overrule this in the {tip} tag. You can just add mode="click". (Or add mode="hover" if you have the default set to click.)

{tip title="Tooltip Title" content="Tooltip text..." mode="click"}Click on me!{/tip}
{tip title="Another Tooltip Title" content="And now you can select this text if you need to copy (and paste) it!" mode="click"}Another tooltip you must click on{/tip}