CODEWITHSUNDEEP
javascriptcssjquery-uijquery-tooltip
Marco
Marco

Reputation: 3641

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?

Upvotes: 1

Views: 281

Answers (1)

Ajmal Ismail
Ajmal Ismail

Reputation: 111

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.

Upvotes: 2

Related Questions