CODEWITHSUNDEEP
jqueryhtmlcsstooltip
SivaRajini
SivaRajini

Reputation: 7375

Customizing default tooltip without using any plugin

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 ?

Upvotes: 1

Views: 885

Answers (1)

BReal14
BReal14

Reputation: 1584

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.

Upvotes: 1

Related Questions