Customizing default tooltip without using any plugin

Question

I want to customize the default tooltip without using any external plugin for customization.

I am using the below code by referring stackoverflow.

a[title]:hover:after {
  content: attr(title);
  position: absolute;
}

Please refer below fiddle link.

http://jsfiddle.net/tDQWN/

but it is showing two kind of tooltips. how can i solve this. i need to display the tooltip in IE8 browser too.

Please refer below screenshot.

enter image description here

only one tool-tip need to be displayed how can i ?

BReal14 · Accepted Answer · 2014-09-05 14:41:29Z

1

I'd suggest ignoring the default title attribute completely (keeping accesibility in mind) and roll your own.

Here's what I use.

In dom ready:

$(document).on({
    mouseenter: function (e) {
        showTooltip(e.pageX,e.pageY,$(this).find('span').attr('data-stitle'));
    },
    mouseleave: function () {
        $('#tooltip').remove();
    }
}, ".myclassIwantToHaveToolTips");

as a regular function outside of dom ready where can easily style position and colors/etc:

function showTooltip(x, y, contents) {
    $('<div id=\"tooltip\">' + contents + '</div>').css( { position: 'absolute', display: 'none', top: y -35, left: x -5, border: '1px solid #cde', padding: '2px', 'background-color': '#def', opacity: 0.90}).appendTo('body').fadeIn(200); 
}

and the markup that supports it:

<div class="myclassIwantToHaveToolTips"><span id="AAA" data-stitle="AAA TITLE">hover here for tips</span></div>

Here's the demo: http://jsfiddle.net/owcwzu9g/

Note that the hover gets chopped by the frames a bit... you can adjust position coordinates accordingly.

answered Sep 5, 2014 at 14:41

BReal14

1,5841 gold badge13 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adri w Ukraine Over a year ago

+1 for the easier solution of using another attribute (ignore the title attribute). I don't think it is possible to hide the native tooltip anyway, something to be investigated I guess. see stackoverflow.com/questions/1299772/… and also stackoverflow.com/questions/9927640/…

Collectives™ on Stack Overflow

Customizing default tooltip without using any plugin

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related