Изменить вид вывода подсказки при наведение на область?

Question

[Люба]

Ребята подскажите как изменить вид наведения подсказки на карте при наведение мышки у меня сейчас появляется стандартная подсказка нужно сделать как на фото ниже.
Вот сам js фаил

$(function(){
	
	var r = Raphael('map', 990, 820),
		attributes = {
            fill: '#97BF1D',
            stroke: '#fff',
            'stroke-width': 1,
            'stroke-linejoin': 'round'
        },
		arr = new Array();
		colors = new Array();

	for (var country in paths) {
		var attr = attributes;

		var obj = r.path(paths[country].path);
		attr['title'] = paths[country].name;

		if(paths[country].type == 'city') {
			attr['fill'] = '#FFFFFF';
			attr['stroke'] = '#000000';
		}


		obj.attr(attr);
		arr[obj.id] = country;
		colors[obj.id] = attr['fill'];

		obj
		.hover(function(){
			this.animate({
				fill: '#11ADE7'
			}, 100);
		}, function(){
			self = this;
			this.animate({

как можно задать стили строке ?

attr['title'] = paths[country].name;
вот css

#map {
clear: both;
width: 600px;
height: 700px;
margin-top: -140px;
margin-left: -145px;
}

.karta {
-o-transform: scale(0.4, 0.4);
-ms-transform: scale(0.4, 0.4);
-webkit-transform: scale(0.8, 0.8);
-moz-transform: scale(0.4, 0.4);
}

Answer 1

[Александр Баля]

За стилизацию тултипа отвечает класс .jqvmap-label, который можно отредактировать в файле jqvmap.css.
Почитайте документацию, там все подробно расписано.

Comments

[Люба]

у меня нет такого класса вот мой скрипт

$(function(){
	
	var r = Raphael('map', 1200, 820),
		attributes = {
            fill: '#97BF1D',
            stroke: '#fff',
            'stroke-width': 1,
            'stroke-linejoin': 'round'
        },
		arr = new Array();
		colors = new Array();

	for (var country in paths) {
		var attr = attributes;

		var obj = r.path(paths[country].path);
		attr['title'] = paths[country].name;

		if(paths[country].type == 'city') {
			attr['fill'] = '#FFFFFF';
			attr['stroke'] = '#000000';
		}


		obj.attr(attr);
		arr[obj.id] = country;
		colors[obj.id] = attr['fill'];

		obj
		.hover(function(){
			this.animate({
				fill: '#11ADE7'
			}, 100);
		}, function(){
			self = this;
			this.animate({
				fill: colors[self.id]
			}, 100);
		})
		.click(function(){ document.location = paths[arr[this.id]].url; })
		
	}	
			
});