본문 바로가기
jquery

글자수 일정 이상일 때 Tooltip 표시

by 바나냥 2020. 4. 10.
   $(".set-tab a").on("mouseenter",function(){
            var txCon = $(this).find("i").text();
            var txLength = $(this).find("i").text().length;
            
            if(txLength > 7){
                $(".tb-r").remove();
                $(this).append('<span class="tb-r">'+txCon+'</span>');
                $(".tb-r").stop().fadeIn(400);
            }
        }).on("mouseleave",function(){
            $(".tb-r").stop().fadeOut(400);
        });
​

아래는 부모의 overflow:hidden; 때문에 안보일 때 fixed

 

$(".gantt-aside-item").find('.tx-row2').on("mouseenter", function(e){
			var pLeft = $(this).offset().left;
			var pTop = $(this).offset().top;
			var pText = $(this).text();
            var pTxLength = $(this).text().length;
			var thisWidth = $(this).outerWidth();
			var thisHeight = $(this).outerHeight();
			var pLeft = $(this).offset().left;
			var pTop = $(this).offset().top;
			
			if(pTxLength > 16){
                $("#toolBox").html(pText);
                $("#toolBox").show();
                $("#toolBox").css({'position':'fixed', 'left':pLeft + thisWidth/2, 'top':pTop - 2*thisHeight, 'text-align':'center'});
            }

        }).mouseleave(function(){
        	$("#toolBox").hide();
        });

댓글