How to replace tooltips using jQuery

I was looking for quick solution to replace the title attribute tooltips generated by the browser, specifically ones generated by an image map.
One quick solution is to use qTip which is atooltip plugin for the jQuery framework. It’s cross-browser, customizable and packed full of features
I was able to do this in one line:


$(document).ready(function () {
$('area[title]').qtip({ style: { name: 'cream', tip: true } })
});

You’ll need to remember to source the two libraries

<script type=”text/javascript” src=”jquery-1.X.X.min.js”></script>
<script type=”text/javascript” src=”jquery.qtip-1.0.0-rc3.min.js”></script>

You can get qTip and a copy of jquery to help get you started.

Published by anthonykuong

Anthony is a versatile Software professional with around 10 years of experience. He is a Full Stack developer experienced with clients in the Financial, Health and Supply Chain industries. He is experienced with MVC frameworks ( Spring Boot) , SPA frameworks ( Angular , VueJS), and also supports automated build deployments and packaging for development, qa, and production servers.. He has delivered rich user experience using Modern web technologies and techniques such are HTML5, CSS3, ECMAScript 6 (ES6)/ ECMAScript 2015, CSS pre-processors (SASS, Less), JavaScript build tools (Grunt, Gulp) , various UI Frameworks including AngularJS , Knockout JS , and CSS Frameworks including Bootstrap, and Foundation. He is adaptable to new technologies and frameworks. He is a rigorous, quality-conscious contributor with solid analytical skills. I can also be found on youtube - Youtube Channel: https://www.youtube.com/user/akuong/

Leave a comment