jquery ui tooltip custom class on page load
Just use $(document).ready
$(document).ready(function() {
$(".phone").tooltip({
tooltipClass:"ui-tooltip1"
});
});
How to use jQueryUI tootip along with my custom css
You can use the tooltipClass option
$(document).ready(function () {
$("#roles").tooltip({
content: "Start typing a name for the IT role you're staffing. There are 75 to choose from. If you're uncertain, start with something general like '<i>Manager</i>'",
tooltipClass: 'my-class'
});
});
then
.my-class.ui-tooltip {
font-size: 11px;
color: #fff;
text-shadow: 0 0 2px #000;
padding: 4px 8px;
border: 1px solid rgba(255, 255, 255, 0.25);
background-color: rgb(25, 25, 25);
background-color: rgba(25, 25, 25, 0.82);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 3px #555;
-webkit-box-shadow: 0 0 3px #555;
-moz-box-shadow: 0 0 3px #555;
}
Demo: Fiddle
Apply CSS to JQuery tooltip
Fitting your case, the css declaration you have to overwrite is "background" and not "background-color".
https://jsfiddle.net/nrnLgc36/1/
html
<div class="col-sm-3 text-center" title="Tooltip title">TEST</div>
css
.tooltip-styling{
background:green !important;
color: black !important;
}
.col-sm-3 {
display: block;
background: #bacd63;
}
javascript
(function (window, $) {
// Set the Tooltips
$(document).ready(function(){
$(document).tooltip({
tooltipClass: "tooltip-styling"
});
});
})(window, $);
jQuery tooltip not working on dynamically loaded HTML content
UPDATED
Your updated question is considerably clearer, and helped me track down what is happening. My original answer solved one of the issues, but not all. There are actually a series of problems.
Problem 1
The first problem is the one I previously described: jQuery selectors only match page elements that exist at page load. $(".content span").tooltip()
will only initialise tooltips for span
s that exist inside .content
at page load. If you inject new span
s later (or new .content
s with span
s inside them), they are not included, and they won't have tooltips.
The simplest fix is to use the (apparently undocumented?) selector
tooltip option. Initialise the tooltips on an HTML element which exists at page load, and then use the selector
option to filter to only match the elements you really want to have tooltips on. The key is the filtering part happens live, and so will match newly added elements.
In your case, we can't use .content
for the tooltip, since that does not exist at page load either. We need some parent element which exists on the page before any of your AJAX stuff happens. Let's assume you have a parent like <div class="parent">
, and your HTML will be injected into that (I guess you could also use body
or document
). So we initialise the tooltips on that parent div:
$(".parent").tooltip({
// the selector option filters the elements that will actually have tooltips
selector: '.content span'
});
Problem 2
Now we have basic tooltip functionality working, even for new content injected in to the page. The next step is to dynamically load content over AJAX, and update the tooltip's title with that content. Normally you would do that like this:
$(selector).tooltip('option', 'content', 'New tooltip text!');
where selector
is something matching the individual span
we're currently viewing the tooltip for. But in our case, that won't work - that span
has no tooltip attached! Because we're initialising tooltips on .parent
, the individual span
s where the tooltips show up do not have a tooltip attached, and calling .tooltip()
on them will fail with an error like:
cannot call methods on tooltip prior to initialization; attempted to call method 'option'
To reference the existing tooltip, we need to do $('.parent').tooltip()
, but if we do:
// Don't do this
$('.parent').tooltip('option', 'content', 'New tooltip text!');
It would change every tooltip on the page to the same 'New tooltip text!'
, and we don't want that.
The .open
event handler you are using to fire your AJAX receives the jQuery event
as a parameter. And that event
includes info about the currently targeted element. Using that, we can find which span on the page we are really currently looking at:
open: function(event, ui) {
// Find real targeted tooltip
let target = $(event.originalEvent.target);
So now we can manipulate that element's title:
$target.attr('title', 'New tooltip!');
We can also make it a tooltip!
$target.tooltip();
In fact this is not enough, because the .parent
tooltip is already open and showing "Please wait ...". The above steps do update the title, but you have to move your mouse away and then back to see it. We want the content to refresh immediately, live. I tried some experimentation and found this works well:
// Temporarily disabling the parent tooltip hides the one that was already open
$('.parent').tooltip('disable');
// Update our target's title
$target.attr('title', 'New tooltip!');
// Initialise a tooltip on our target, and immediately open it
$target.tooltip().tooltip('open');
// Re-enable the parent tooltips, so this process will work again for other spans
$('.parent').tooltip('enable');
So we are actually adding new tooltip instances to the page, each time we mouse-over a matching span. This approach has the added advantage that the new tooltip replaces the old, parent one for the specific span
. That means the parent tooltip options no longer apply to span
s that have already had their tooltip content loaded, which means if you mouse-over it a 2nd time, it does not fire the AJAX request a 2nd time for that span
. The content we got from the first AJAX call is already there and simply re-used.
Here's a working snippet demonstrating all of this.
I've used https://www.npoint.io/ which is a JSON storage bin, to simulate your AJAX calls. I have no affiliation with it, it just seems like a handy tool. Unfortunately it does not seem very reliable, and requests to it failed a few times while I was working. If that happens, pls retry.
I added a few bins with data matching your 1.html
and 2.html
files, the code below loads them and uses their content:
- This bin includes your HTML content;
- This bin includes dummy data for user ID 0;
- This bin includes dummy data for user ID 1;
- This bin includes dummy data for user ID 2;
$(document).ready(function () {
// This URL returns a JSON response including HTML like your 1.html,
// this way we can realistically simulate your 1.html AJAX call.
let htmlContentUrl = 'https://api.npoint.io/6893d2fd7632835742cf';
// These URLs return JSON responses including plain text like your
// 2.html file, this way we can realistically simulate AJAX calls
// loading and using data from your DB
let userContentUrls = [
'https://api.npoint.io/06cf752b395286e41cb4',
'https://api.npoint.io/2a3e0a338f92a803b3fc',
'https://api.npoint.io/a9a4296244c36e8d5bfc'
];
// We use this selector a few times, it is good practice to cache it
var $parent = $('.parent');
$("#btnLoad").click(function () {
$.ajax({
url: htmlContentUrl,
}).done(function (msg) {
$('#container').html(msg.content);
});
});
$parent.tooltip({
selector: '.conten span',
track: true,
open: function (event, ui) {
// Find real targetted tooltip
var $target = $(event.originalEvent.target);
var userid = $target.attr('data-id');
url = userContentUrls[userid];
console.log('For userid', userid, 'url is', url);
$.ajax({
url: url,
type: 'get',
data: {
userid: userid
},
success: function (response) {
// We can't simply update the tooltip for $target, because
// it *has* no tooltip! The tooltip is actually attached
// to .parent. To refresh the already visible tooltip, we
// need to take a few steps.
$parent.tooltip('disable');
$target.attr('title', response.content);
$target.tooltip().tooltip('open');
$parent.tooltip('enable');
}
});
}
});
});
.container {
margin: 0 auto;
width: 30%;
}
.content {
border: 1px solid black;
padding: 5px;
margin-bottom: 5px;
}
.content span {
width: 250px;
}
.content span:hover {
cursor: pointer;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="parent">
<div class="container">
<div class="content">
<span id="user_0" title="Please wait ..." data-id="0">Water</span>
</div>
</div>
<input type="button" id="btnLoad" value="Load" />
<div class='container' id="container"></div>
</div>
How to wrap jqueryUI tooltip with custom div?
You could use the open
- event to wrap your div around the created tooltip:
$(document).tooltip({
tooltipClass: "custom-tooltip-styling",
open: function(event, ui) {
$(ui.tooltip).wrap("<div class='custom-tooltip-wrapper'></div>");
},
close: function(event, ui) {
$('.custom-tooltip-wrapper').remove();
}
});
However, you need to style your wrapper accordingly, it otherwise will just appear at the end of the page.
I use the close
- event here to get rid of the wrapper afterwards.
Example
Change div class of jQuery tooltip
The problem is that the tooltip appends when you hover over the element, that's why this code doesn't working, you element was not created yet, at that moment.
$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');
You can do it by adding this option, this will add additional class to ui-tooltip-content
classes: {
"ui-tooltip-content": "ui-tooltip-content2"
},
The full code will be
$tooltip.tooltip({
classes: {
"ui-tooltip-content": "ui-tooltip-content2"
},
content: function () {
return [data];
},
});
Remove this line:
$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');
You can check the docs here.
How to change tooltip color on open using jQuery UI Tooltip?
I didn't get your logic very well, but here's how I achieve different classes depending on data-severity
. Instead of applying .tooltip()
to all elements, iterate through them and set the tooltipClass
as $(this).data('severity')
. The content function allows to add a class too.
$('a.tips').each(function () { var severity = $(this).data('severity'); $(this).tooltip({ content: function () { return '<em>' + $(this).attr('title') + '</em>'; }, tooltipClass: severity, show: "slideDown", open: function (event, ui) { ui.tooltip.hover(function () { $(this).fadeTo("slow", 0.5); }); } });});
.ui-tooltip { padding: 10px 20px; border-radius: 20px; font: bold 14px"Helvetica Neue", Sans-Serif; text-transform: uppercase; box-shadow: 0 0 7px black;}.ui-tooltip.warning { color: #E3E8F7; background: #D94AA4;}.ui-tooltip.danger { color: #212942; background: #CABA75;}a.tips { float:left; margin: 0 10px; text-decoration:none; font: Sans-Serif; }body { background-color:#eee; padding: 30px; }
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.tooltip.min.css" rel="stylesheet"/><script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="container"><a href="#" title="Tooltip 1" class="tips" data-severity="warning">(Warning)</a><a href="#" title="Tooltip 2" class="tips" data-severity="danger">(Danger)</a></div>
Related Topics
How to Change Border Color of Required Input Fields
Why Doesn't CSS-Calc() Work When Using 0 Inside the Equation
CSS Variables - Swapping Values
"Compact" Function in Bourbon with SASS Not Called
Css: How to Select Parent's Sibling
Css: Before/After Content with Title
Selector for All a Tag Descendants
When I Float the Div to the Right the Screen Messes Up...I'Ve Tried Clear and Some Other Options
Make Element Scroll Without Fixed Position Setting
Sass --Watch with Automatic Minify
Is Sizing Fonts Using "Em" Still Relevant
How to Make Certain Text Not Selectable with CSS
Getting Rid of All the Rounded Corners in Twitter Bootstrap
Difference Between Two Element Styles with Google Chrome
Does Bootstrap Have Builtin Padding and Margin Classes
Perfect 100% Width of Parent Container for a Bootstrap Input