Подсказка (jquery) - PullRequest
Новая
       15

Подсказка (jquery)

2 голосов
/ 08 июля 2011

Я работаю над всплывающей подсказкой с Jquery, но она не работает.Не могли бы вы мне помочь?Я не понимаю, почему это не работает хорошо ...

Спасибо !! 

    .tooltip{
    padding:5px 10px;
    background-color:#e5f4fe;
    border:#5a5959 1px solid;
    position:absolute;
    z-index:9999;
    color:#0c0c0c;
    font-size:0.688em;
    min-width:100px;
    min-height:50px;
}

.tipBody {
    background-color:#e5f4fe;
    padding:2px;
}

HTML: 

<a rel="tooltip" title="Print Results" class="printbtn" href="#">Print results</a>

JQUERY: 

   $(document).ready(function() {

    //Select all anchor tag with rel set to tooltip
    $('a[rel=tooltip]').mouseover(function(e) {

        //Grab the title attribute's value and assign it to a variable
        var tip = $(this).attr('title');    

        //Remove the title attribute's to avoid the native tooltip from the browser
        $(this).attr('title','');

        //Append the tooltip template and its value
        $(this).append('<div class="tooltip"><div class="tipBody">' + tip + '</div></div>');        

        //Show the tooltip with faceIn effect
        $('.tooltip').fadeIn('500');
        $('.tooltip').fadeTo('10',0.9);

    }).mousemove(function(e) {

        //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
        $('.tooltip').css('top', e.pageY + 10 );
        $('.tooltip').css('left', e.pageX + 20 );

    }).mouseout(function() {

        //Put back the title attribute's value
        $(this).attr('title',$('.tipBody').html());

        //Remove the appended tooltip template
        $(this).children('div.tooltip').remove();

    });

});

Ответы [ 4 ]

2 голосов
/ 09 июля 2011

Я сильно изменил ваши коды, это не было увяданием и прочим. вот редактирование: 

$(document).ready(function() {

    $('body').append('<div class="tooltip"><div class="tipBody"></div></div>');

    var tip; // make it global
    $('a[title]').mouseover(function(e) { // no need to point to 'rel'. Just if 'a' has [title] attribute.

        tip = $(this).attr('title'); // tip = this title   
        $(this).attr('title','');    // empty title
        $('.tooltip').fadeTo(300, 0.9).children('.tipBody').html( tip ); // fade tooltip and populate .tipBody

    }).mousemove(function(e) {

        $('.tooltip').css('top', e.pageY + 10 ); // mouse follow!
        $('.tooltip').css('left', e.pageX + 20 );

    }).mouseout(function(e) {
        $('.tooltip').hide(); // mouseout: HIDE Tooltip (do not use fadeTo or fadeOut )
        $(this).attr( 'title', tip ); // reset title attr
    });

});

и скрипка ДЕМО


Если у вас есть время для изучения, я создал несколько плагинов всплывающей подсказки:

titleClouds

titleGrabber

0 голосов
/ 14 апреля 2016

Использовать файл CSS 

span.reqType {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #89A4CC;
  line-height: 16px;
  color: White;
  font-size: 13px;
  font-weight: bold;
  border-radius: 8px;
  text-align: center;
  position: relative;
}
span.reqType:hover { background-color: #3D6199; }
div.tooltip {
  background-color: #3D6199;
  color: White;
  position: absolute;
  left: 25px;
  top: -25px;
  z-index: 1000000;
  width: 250px;
  border-radius: 5px;
}
div.tooltip:before {
  border-color: transparent #3D6199 transparent transparent;
  border-right: 6px solid #3D6199;
  border-style: solid;
  border-width: 6px 6px 6px 0px;
  content: "";
  display: block;
  height: 0;
  width: 0;
  line-height: 0;
  position: absolute;
  top: 40%;
  left: -6px;
}
div.tooltip p {
  margin: 10px;
  color: White;
}

В моем случае я использовал тег span со знаком вопросительного знака. При наведении курсора будет отображаться результат 

<span class="reqType ">?</span>

в моем js-файле, который я использовал 

$("span.reqType").hover(function () {
        var toolVal = $(this); 
        com.trp.nex.component.hrrequestform.showToolTipReqType(toolVal);
    }, function () {
     $("div.tooltip").remove();
    });


my.showToolTipReqType = function(toolVal){
            var selectedVal = $("#type").val();
            var reqType = populateReqType.requestType[selectedVal].description;
            toolVal.append('<div class="tooltip"><p>"'+ reqType + '"</p></div>');
        };
0 голосов
/ 24 марта 2015

пример работы

CSS: 

  #message{
        display: none;
    }

JQuery: 

$("#message").html("Tooltip text");
$("#message").fadeIn(1000, function() {
    $("#message").fadeOut(2000)
});
0 голосов
/ 08 июля 2011

Ваш код в порядке.Вы должны проверить, правильно ли вы включили jQuery, не влияет ли на результаты какая-либо другая библиотека и существует ли ваш <a> html, прежде чем выбирать его с помощью jQuery

...