VPF::tultip - Форум программистов

Areostar

Дата 27.7.2015, 08:48 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1191
Регистрация: 5.4.2008

Репутация: нет
Всего: -2

при наведении курсора на див, рядом с ним или с курсором должно появлятся чтото вроде таблички с пояснениям. проблема с вычислением координат.

Код


coordX = event.clientX;
coordY = event.clientY;

а диву(таблички) дал position:fixed

НО отображается совсем не там где мышка.

Как поправить??

Это сообщение отредактировал(а) Areostar - 27.7.2015, 08:49

_zorn_

Дата 27.7.2015, 17:45 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 1
Всего: 12

Если строишь велосипед для тултипов вот тебе сниппет на jQuery

Код


jQuery(function($){
  $('body').append('<div id="my_tooltip" class="my_tooltip"></div>')
  var $tooltip = $('#my_tooltip');
  $('[title]').each(function(){
    var $this = $(this);
    $this.data('title', this.title);
    this.title = '';

    $this.mousemove(function(e){
       $tooltip.css({left: e.clientX, top: e.clientY + 20});
    }).mouseenter(function(){
       $tooltip.text($(this).data('title'));
       $tooltip.show(); 
    }).mouseleave(function(){
       $tooltip.hide();
    })
  })
})

Класс ксс my_tooltip думаю сам пропишешь. начальное условие display:none и position: absolute

position: fixed вообще ниразу не для тултипов. Хоть бы матчасть почитали что ли....
Ну и с английским не ахти у вас. tooltip же

Это сообщение отредактировал(а) _zorn_ - 27.7.2015, 17:50

Areostar

Дата 29.7.2015, 12:26 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1191
Регистрация: 5.4.2008

Репутация: нет
Всего: -2

Делал чтото подобное, имено e.clientX, top: e.clientY

задавал position:absolute;

тультип появлялся но ни как не хотел отображаться рядом с курсором!

какие именно стили нужны ??

вот мой примерный код:

Код



<div id="tultip" style="display:none; position:absolute; text-align:center; height:30px; width:auto; background-color:#ffffff; z-index:1000; border:1px;"></div>

Код


window.addEventListener("mousemove",function(e)
{
        $("#tultip").css("top",  e.clientY );
        $("#tultip").css("left", e.clientX);
});

function mouseEnterCountry(country)
{    
        $("#tultip").html(results);
        $("#tultip").css("display", "block");
                        
}        
            
function mouseOutCountry()
{
    $("#tultip").css("display","none");
}

_zorn_

Дата 29.7.2015, 16:19 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 1
Всего: 12

Див тултипа где находится ?
Желательно его прямым чилдреном боди делать. Потому что координаты считаются от первого родителя с position отличным от static

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »