CODEWITHSUNDEEP
texthovercursor
F Hughes
F Hughes

Reputation: 45

Hover Text effect next to mouse cursor

Dear community is there any way to do a text next to the cursor hover effect (in css?) like on this site here?

http://manuelraeder.co.uk/

I tried it with abbr and span style, but it doesn't seem to work. Text should be changeable with every picture.

Thanks in advance!

Upvotes: 0

Views: 2092

Answers (1)

gmpatzer
gmpatzer

Reputation: 91

From the website you linked, they appear to be using Javascript. I don't think there is a way to do this purely with CSS.

When you hover your mouse over an image on the website, a new HTML tag is created at the end of the body:

<p class="tooltip" style="display: block; top: ...; left: ...;">TEXT</p>

Where top and left correspond to the pixel values that your cursor is at, and the text would be whatever text you want to float next to the cursor.

In the Javascript, you would create a hover observer for the associated images, and inside the trigger function create the new p tooltip element. You would set the text for your p element to be the respective image's alt title. Looking at the website's Javascript, this is what they did for their tooltip:

$(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('fast');
}, 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 })
});
});

Upvotes: 0

Related Questions