Elliot

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

12 posts in this topic

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

Кто разбирается в 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

Блин:

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

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

Elliot likes this

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();

 

Elliot likes this

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.