jQuery를 사용하여 호버에 툴팁 메시지를 표시하려면 어떻게 해야 합니까?

jQuery를 사용하여 호버에 툴팁 메시지를 표시하려면 어떻게 해야 합니까?

제목에 나와 있듯이 jQuery를 사용하여 호버에 툴팁 메시지를 표시하려면 어떻게 해야 합니까?

툴팁 플러그인은 필요한 것에 비해 너무 무거울 수 있습니다.도구 설명에 표시할 텍스트로 'title' 속성을 설정하기만 하면 됩니다.

$("#yourElement").attr('title', 'This is the hover-over text');

(div/span/table/tr/td/등을 가지고 있다고 가정할 때) 다음이 매력적으로 작용할 것입니다."id"="myId")

    $("#myId").hover(function() {
        $(this).css('cursor','pointer').attr('title', 'This is a hover text.');
    }, function() {
        $(this).css('cursor','auto');
    });

칭찬의 의미로.css('cursor','pointer')마우스 포인터를 호버에 변경합니다.

jQuery Tooltip 플러그인을 살펴봅니다.다른 옵션에 대한 옵션 개체를 전달할 수 있습니다.

또한 사용 가능한 다른 대체 툴팁 플러그인이 있으며, 그 중 몇 가지는

• random.Next()의 jQuery AJAX 툴팁

• dhtml goods AJAX 툴팁

• 단서팁

데모와 설명서를 보고 코드에 사용하는 방법에 대한 구체적인 질문이 있으면 질문을 업데이트하십시오.

부트스트랩 툴팁을 사용할 수 있습니다.초기화하는 것을 잊지 마십시오.

<span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation">
inside span
</span>

텍스트 설명이 왼쪽에 표시됩니다.

js와 함께 실행합니다.

$('.tooltip-r').tooltip();

추천하는 qTip과 다른 프로젝트들이 꽤 오래되어서 qTip2가 가장 최신이기 때문에 사용하는 것을 추천합니다.

대부분의 답변에서 언급되었듯이, 플러그인의 사용은 여기에 요구되는 사항과 비교할 때 비중이 클 것입니다.그래서 간단한 HTML, CSS & JQuery 코드만으로 필요한 출력을 얻을 수 있는 또 다른 솔루션이 있습니다.

CSS를 사용하면 더 나은 시야를 얻을 수 있을 것입니다. 아래 코드를 확인해보세요.

$(".tool-tip").attr('title-new', 'another example to display the hover-over texts');

button {
    background: aqua;
    padding:10px;
  } 
  .tool-tip[title-new]:hover:after {
      content: attr(title-new);
      position: absolute;
      border: #c0c0c0 1px dotted;
      padding: 10px;
      display: block;
      z-index: 100;
      background-color: #000000;
      color: #ffffff;
      max-width: 200px;
      text-decoration: none;
      text-align:center;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>hover on the button below to check the results</p>
<button class="tool-tip">Here I am</button>

ToolTipster 보기

• 사용하기 쉬운
• 유연한
• 일부 다른 툴팁 플러그인에 비해 꽤 가벼운 경량(39kB)
• 추가적인 스타일링 없이 더 잘 어울리는
• 미리 정의된 테마 세트가 있습니다.

최신/업데이트 솔루션의 경우 Popper를 통해 구동되는 웹용 완전한 툴팁, 팝업, 드롭다운, 메뉴 솔루션인 Tipy.js를 사용해 볼 수 있습니다.

티피.js

jQuery를 사용하지 않고 css만 사용하면 됩니다.

<a class="tooltips">
    Hover Me
    <span>My Tooltip Text</span>
</a>
<style>
    a.tooltips {
        position: relative;
        display: inline;
    }

        a.tooltips span {
            position: absolute;
            width: 200px;
            color: #FFFFFF;
            background: #000000;
            height: 30px;
            line-height: 30px;
            text-align: center;
            visibility: hidden;
            border-radius: 6px;
        }

            a.tooltips span:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 35%;
                margin-left: -8px;
                width: 0;
                height: 0;
                border-top: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }

    a:hover.tooltips span {
        visibility: visible;
        opacity: 0.8;
        bottom: 30px;
        left: 50%;
        margin-left: -76px;
        z-index: 999;
    }
</style>

언급URL : https://stackoverflow.com/questions/1333546/how-can-i-display-a-tooltip-message-on-hover-using-jquery