For the first here for posing a question. I've already learned a lot from the site.
My problem is that i can't get the jQuery UI widget tooltip working on my site. I'm on joomla 4 with an RSJoomla template (RSJuno).
In my custom.js file i've added this code for diplaying images full size:
//Photos fullscreen
jQuery(document).ready(function(){
jQuery("img").click(function(){
this.requestFullscreen()})});
Works well.
Now i'm trying this code:
//Tooltip on fotos
jQuery(document).ready(function(){
jQuery( "div" ).tooltip({
content: "Awesome title!"
});
});
Not working at all. Content is just a test text! If i use "img" it isn't working either. Nothing shows up.
This code (from internet) as a test is also working well. (Div and img are both used to test so i'm aware of the difference in the code.
jQuery(document).ready(function () {
// Detect when the mouse is over a div with the mouseover() method
jQuery( "div" ).mouseover(function ( event ) {
// Make the div under the mouse grey and taller
jQuery( "div" ).tooltip({
content: "Awesome title!"
//By the way the tooltip is NOT showing the content text//
});
jQuery( "#" + event.target.id ).css({
"background-color" : "lightgrey",
"height" : "8em"
});
});
// Detect when the mouse moves away with the mouseout() method
jQuery( "div" ).mouseout(function ( event ) {
// Return the size and color of the div to its original state
jQuery( "#" + event.target.id ).css({
"background-color" : "white",
"height" : "4em"
});
});
});
I would like to have a code which integrates this 2 codes into 1 simple one that does the following:
- on mouseover displaying tooltip "Click for fullscreen" on tag;
- as mouse moves away, hide the tooltip.
Whatever i'm trying in no way i get the tooltip to display, no mather to what i connect it: "img" "div"....etc. And thus combining the 2 leads to nothing.
The big code is working in so far that the css styled tooltip is shown, but at a fixed place (center of the div) and ONLY on a specially created div in the page. NOT on the "img" tag.
If a attach this long code with css to the special created div it's shows only the content of the tag title on the div and not the custom text. If i delete the title tag from the div nothing shows.
Could it be a conflict with the template code?
I have a RSJoomla template and through custom tags in the template i'm loading the necessary libraries as follows:
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.css" rel="stylesheet" />
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.structure.css" rel="stylesheet" />
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.theme.css" rel="stylesheet" />
From inspecting my page i see that this is well loaded:
<link rel="stylesheet" href="/templates/rsjuno/css/custom.css" type="text/css" />
<script src="/templates/rsjuno/js//jquery-ui/jquery-ui.js"></script>
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.css" rel="stylesheet" />
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.structure.css" rel="stylesheet" />
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.theme.css" rel="stylesheet" /> </head>
<body class="site">
....
After spending lots of hours i'm out of ideas. Lots of different codes i found on internet for the tooltip didn't work either. For example (on the youtube video its working well):
jQuery("img").tooltip({
track:true,
content:"Whow"
});
});
I need to use jQuery instead of $ to avoid "$ is not a function" error.
So please help if you can.
Ps i cannot provide a link to the site because its developped on localhost.
Thanks
NEW INFO I've used this working fiddle (https://jsfiddle.net/vinorodrigues/2vnt9a0h/32/) in exact copy on my website and still get a standard layout tooltip. See this screenshot enter image description here
