1

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 ?

SivaRajini
  • 7,225
  • 21
  • 81
  • 128

1 Answers1

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.

BReal14
  • 1,603
  • 1
  • 12
  • 35
  • +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 http://stackoverflow.com/questions/1299772/jquery-hide-native-tooltip-resolved and also http://stackoverflow.com/questions/9927640/styling-native-tooltip-from-title-tooltip-text – Adriano Sep 05 '14 at 14:54