javascriptcssjquery-uijquery-tooltip

styling two jquery-ui tooltips

I use tooltips for displaying hints and displaying errors on a website, e.g.:

<span class="help">
<a title="hint for inputfield" href="javascript:void(0);">?</a>
</span>

<span class="error">
<a title="Please fill out!" href="javascript:void(0);">!!!</a>
</span>

I activate the tooltips with:

$( document ).tooltip();

In case of error I want to style the tooltip with a red border. I only found a way to style the tooltip global: https://jqueryui.com/tooltip/#custom-style But how can I use two different styled tooltips on one single page?

Solution

  • You might want to add a custom class to your error tooltip using tooltipClass property.

    HTML

    <span class="help">
    <a title="hint for inputfield" href="javascript:void(0);">?</a>
</span>

<span class="error">
    <a title="Please fill out!" href="javascript:void(0);">!!!</a>
</span>

    CSS

    .error-style {
    border: 1px solid red;
}

    JavaScript

    $(".help").tooltip();
$(".error").tooltip({
    tooltipClass: "error-style"
})

    Here is the fiddle I have setup for you. http://jsfiddle.net/t1h3werd/

    Hope it helps.