Here's a tooltip script, http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/. It works great in all the browsers but the default tooltip isn't disabled in IE.
How can i update the following script to disable the default tooltip?
<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip').css({ top: mousey, left: mousex })
});
});
</script>
I don't see any reason to add the title attribute back in to the element on blur. You have it stored in the jQuery metadata. My guess is that is why IE is still showing it. Remove the line
$(this).attr('title', $(this).data('tipText'));
and see if that fixes it.
EDIT: That missed some requirements. This is untested, but might work:
$(document).ready(function() {
$('.masterTooltip').each(function() {
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
}).hover(function(){
$('<p class="tooltip"></p>')
.text($(this).data('tipText'))
.appendTo('body')
.fadeIn('slow');
}, function() {
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20;
var mousey = e.pageY + 10;
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
Note that this is sub-optimal, as it calls $(this) twice in the each block, but that should be easy enough to fix.
I have simple solution to disable the default tooltip which is shown in left/right bottom side of the IE or other browser. [If your default tooltip is same as I mentioned]
Just write a simple javascript function
function GoToLink()
{
location.href = "mypage.htm";
}
call this function in tag like
<a id="204" name="wow" class="SettPage" href="" onclick="GoToLink()">
Related
I am using the following JS function to have hover tooltip effect. The function works excellent. Problem happens after loading certain area with ajax. I need to call this function to work on the data collected through ajax (Jquery). That is OK as well. Problem is while I close the area called through ajax, I see unexpected behavior at the base page. The previous tooltip effects now show bubble within self (image is given below).
Any idea how to prevent this conflict?
function tooltip(){
$('.master_tooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
}
Call that function only once, otherwise the event handlers will be bound multiple times for the already existing elements.
What you need to do is rewrite it so it delegates the mouse events and works with dynamically inserted elements, like this
function tooltip(){
$(document).on({
mouseenter : function() {
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').text(title)
.appendTo('body')
.fadeIn('slow');
},
mouseleave : function() {
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
},
mouseover : function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip').css({ top: mousey, left: mousex })
}
}, '.master_tooltip');
}
I am trying to change the inline CSS style of top which is by default provided by jQuery using jQuery CSS() class. But it applies for a while and then it is again switched to old inline CSS top style.
Why is this happening?
see the jsfiddle.
this is what I have done:
<script>
`$(".popbutton").on('click',function(e) {
var mousex = e.pageX + 20, //Get X coodrinates
mousey = e.screenY + 20; //Get Y coordinates
var e = jQuery(this);
this.timer=setTimeout(function () {
e.popover("show");
},600);
var menu = $(".popbutton").next(),
menuWidth = menu.width(), //Find width of tooltip
menuHeight = menu.height(), //Find height of tooltip
menuVisY = $(window).height() - mousey, //Distance of element from the bottom of viewport
heightY=$(this)[0].scrollHeight-(1.2*menuHeight);
$(menu).css('top','100px');
});
});`
</script>
Because of this code:
this.timer = setTimeout(function () {
e.popover("show");
}, 600);
When you click the button, the position is calculated correctly but e.popover('show') again changes the position after a delay of 600ms.
How can I make the other images also follow the mouse? Not all at the same time, but when I click on the selected image.
How can I calculate the distance where the mouse moved when I click on the image?
See link below.
HTML:
<div id="squarelocation"></div>
<div class="square 1">1</div>
<div class="square 2">2</div>
<div class="square 3">3</div>
Jquery:
$(document).ready(function () {
var i = true;
$(document).on('click', function () {
$(this)[i ? 'on' : 'off']('mousemove', follow);
i = !i;
});
function follow(e) {
var xPos = e.pageX;
var yPos = e.pageY;
$("#squarelocation").html("The square is at: " + xPos + ", " + yPos + "pixels");
$(".2").offset({
left: e.pageX,
top: e.pageY
});
}
});
I suggest you to bind a click event to the square class like this:
var clickedImage;
$('.square').click(function (e){
initialX = e.pageX;
initialY = e.pageY;
clickedImage = this;
});
and assign the context to a variable, so that you can refer to it whenever you needed. And then in your code, refer to that context instead of the hardcoded '.2':
$(clickedImage).offset({
left: e.pageX,
top: e.pageY
});
This way, the image clicked will be referred to, instead of just '2' following the mouse all the time.
Same for calculating the distance between the clicked origin and the current position, you can save the original spot on clicking the image:
var initialX;
var initialY;
$('.square').click(function (e){
initialX = e.pageX;
initialY = e.pageY;
clickedImage = this;
});
and do the calculation in the 'follow' function, of course how the calculation should be is up to you, but here is an example:
var distanceX = xPos - initialX;
var distanceY = yPos - initialY;
$("#squarelocation").html("The square is at: " + xPos + ", " + yPos + "pixels");
$('#squaredistance').html("Distance from origin: " + distanceX + ", " + distanceY);
Hope this help. jsfiddle: http://jsfiddle.net/FW9jV/1/
You could add an 'active' class for the active square. I added an example.
The active square will always be moving until you click to deactivate it.
http://jsfiddle.net/fG6kr/1/
$(document).ready(function () {
var i = true;
$('.square').on('click', function () {
if( $(this).hasClass("active"))
{
$(this).removeClass("active");
$(document).off('mousemove');
}
else
{
$(this).addClass("active");
$(document).on('mousemove', follow);
}
});
function follow(e) {
var xPos = e.pageX;
var yPos = e.pageY;
$("#squarelocation").html("The square is at: " + xPos + ", " + yPos + "pixels");
$('.active').offset({
left: e.pageX,
top: e.pageY
});
}
});
demo
$(function() {
$('.square').click(function(){
$(this).toggleClass('sel');
});
$(document).on('mousemove', function(e){
$(".sel").offset({left: e.pageX+10, top: e.pageY+10});
});
});
I have this little javascript
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
its making image titles appear very nice, but I cant find a way to put a line break in there.
I have tried <br> </br> <br/>   
 n/ nothing worked
If you want to insert html use .html() instead of .text()
On the following page I have a popup that is supposed to show beside the image, depending on the window size the pop-up displays further/closer to the mouse. I don't understand what is wrong with the code, that makes the pop-up not display in the same proximity to the mouse?
http://www.hughgrice.com/test/
jQuery(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
follow();
});
function follow(){
d = document.getElementById("thumbTT");
if(openToolTip){
d.style.display = "block";
d.style.left = mouseX+5 + "px";
d.style.top = mouseY-100 + "px";
}else{
d.style.display = "none";
}
}
http://www.hughgrice.com/test/
This should work:
var $elem = $( '#thumbTT' );
$( document ).on( 'mousemove', function ( e ) {
follow( e.pageX, e.pageY );
});
function follow ( x, y ) {
if( openToolTip ) {
$elem.css({ left: x + 5, top: y - 100 }).show();
} else {
$elem.hide();
}
}
I'm assuming that the #thumbTT element is static, so I'm caching the reference to it beforehand.
As your wrapper DIV is relative positioned that's why it is not positioned correctly. Either you have to remove the position:relative from your wrapper div or you have to write your mousemove function like
jQuery(document).mousemove(function (e) {
var offset = jQuery(this).css('offset');
mouseX = offset.left;
mouseY = offset.top;
follow();
});
maybe you have to adjust your code