Jump to content
Elliot

Ищу ToolTip для кнопки <button>

Recommended Posts

Здравствуйте!

Кто разбирается в JS, поправьте пожалуйста скриптик, а то работает только с ссылками, а нужно чтобы работал с кнопками <button>

Я атрибут поменял, но это ничего не дало. 

И он хороший, не нужно к ссылкам/кнопка прикреплять типа tooltip="" а сразу ищет title...

Вот он:

$.jQuery(document).ready(function(){jQuery("a").tool()};
(function($) {
    $.fn.tool = function(options){
              var defaults = {    
            xOffset: 10,        
            yOffset: 25,
            tooltipId: "tool",
            clickRemove: false,
            content: "",
            useElement: ""
        };             
        var options = $.extend(defaults, options);  
        var content;                
        this.each(function() {                  
            var title = $(this).attr("title");                
            $(this).hover(function(e){                                                                            
                content = (options.content != "") ? options.content : title;
                content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
                $(this).attr("title","");                                                      
                if (content != "" && content != undefined){            
                    $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");        
                    $("#" + options.tooltipId)
                        .css("position","absolute")
                        .css("top",(e.pageY - options.yOffset) + "px")
                        .css("left",(e.pageX + options.xOffset) + "px")                        
                        .css("display","none")
                        .fadeIn("fast")
                }
            },
            function(){    
                $("#" + options.tooltipId).remove();
                $(this).attr("title",title);
            });    
            $(this).mousemove(function(e){
                $("#" + options.tooltipId)
                    .css("top",(e.pageY - options.yOffset) + "px")
                    .css("left",(e.pageX + options.xOffset) + "px")                    
            });    
            if(options.clickRemove){
                $(this).mousedown(function(e){
                    $("#" + options.tooltipId).remove();
                    $(this).attr("title",title);
                });                
            }
        });
      
    };
})(jQuery);

Заранее спасибо!

Share this post


Link to post
Share on other sites
7 часов назад, chromov сказал:

Блин:


jQuery(document).ready(function($) {
    $("button").tool();
}

Для всех button будет искать атрибут title.

Спасибо за ответ, но к сожалению, этот вариант не работает. Кнопку не находит...

Share this post


Link to post
Share on other sites

А кнопка на странице есть изначально? Атрибут title на кнопке есть?
Скиньте страницу с проблемой - так сложно что-то говорить.

Share this post


Link to post
Share on other sites
26 минут назад, chromov сказал:

Извините, не закрыл скобку


jQuery(document).ready(function($) {
    $("button").tool();
});

Вот пример: https://jsfiddle.net/kaliyan/1rbLj4f2/1/

Не работает, вот сама кнопка

<button id="btn_id1" type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt" style="float:right" title="Подсказка"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

Плюс, брал ваш пример, тоже не работает...

Share this post


Link to post
Share on other sites

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

Но когда я выбрал опции, кнопка активировалась, disabled удалился и tooltip появился.

chromov а вы пожете добавить какое-то исключения?

Share this post


Link to post
Share on other sites
10 часов назад, Elliot сказал:

chromov а вы пожете добавить какое-то исключения?

что вы имеете введу?

Share this post


Link to post
Share on other sites
14 часа назад, chromov сказал:

что вы имеете введу?

Имею ввиду, что если в кнопке присуствует атрибут disabled то скрипт не работает, но если убрать этот атрибут - все работает.

Этот атрибут убирается после того, как человек выбирает опции в товаре.

Share this post


Link to post
Share on other sites

Сделайте вокруг кнопки <span class="any_class" title="Тут подсказка"><button>Кнопка</button></span>, и вешайте тултип на нее. 

$("span.any_class").tool();

 

Share this post


Link to post
Share on other sites
2 часа назад, chromov сказал:

Сделайте вокруг кнопки <span class="any_class" title="Тут подсказка"><button>Кнопка</button></span>, и вешайте тултип на нее. 


$("span.any_class").tool();

 

Сейчас попробую

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...