[javascript] div에 툴팁 추가

JAVASCRIPT / 글쓴이

다음과 같은 div 태그가 있습니다.

<div>
  <label>Name</label>
  <input type="text"/>
</div>

:hoverdiv 에 툴팁을 표시하는 방법 , 바람직하게는 페이드 인 / 아웃 효과가있는 방법.

답변

기본 툴팁의 경우 다음을 원합니다.

<div title="This is my tooltip">

더 멋진 자바 스크립트 버전의 경우 다음을 살펴볼 수 있습니다.

https://jqueryhouse.com/best-jquery-tooltip-plugins/

위의 링크는 툴팁에 대한 25 가지 옵션을 제공합니다.

답변

그것은 수행 할 수 있습니다 CSS 만에 , 아니 자바 스크립트 전혀 : 실행 데모

  1. 사용자 정의 HTML 속성을 적용하십시오 (예 : data-tooltip="bla bla"당신의 객체 (div 또는 무엇이든) :

    <div data-tooltip="bla bla">
    something here
</div>

  2. :before각 [data-tooltip]객체 의 의사 요소를 투명하고 절대적으로 배치하며 data-tooltip=""내용 으로 가치를 갖도록 정의하십시오 .

    [data-tooltip]:before {
    position : absolute;
     content : attr(data-tooltip);
     opacity : 0;
}

  3. :hover:before각각의 호버링 상태를 정의 [data-tooltip]하여 표시하십시오.

    [data-tooltip]:hover:before {
    opacity : 1;
}

  4. 툴팁 객체에 스타일 (색상, 크기, 위치 등)을 적용하십시오. 이야기의 끝.

데모에서는 다른 규칙을 정의하여 부모 외부에 있지만 다른 사용자 정의 속성, data-tooltip-persistent간단한 규칙 을 사용하여 도구 팁을 가리킬 때 사라져야하는지 여부를 지정했습니다 .

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

참고 1 : 이에 대한 브라우저 적용 범위는 매우 넓지 만 이전 IE에는 자바 스크립트 폴백 (필요한 경우)을 사용하는 것이 좋습니다.

참고 2 : 향상된 기능으로 약간의 자바 스크립트를 추가하여 마우스 위치를 계산하고 여기에 적용된 클래스를 변경하여 의사 요소에 추가 할 수 있습니다.

답변

이를 위해 JavaScript가 전혀 필요하지 않습니다. title속성을 설정하십시오 .

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>

툴팁의 시각적 표현은 브라우저 / OS에 따라 다르므로 페이드 인 될 수도 있고 페이딩되지 않을 수도 있습니다. 그러나 이것은 툴팁을 수행하는 의미 론적 방법이며 화면 판독기와 같은 접근성 소프트웨어에서 올바르게 작동합니다.

스택 스 니펫 데모

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>

스 니펫 확장

답변

다음은 멋진 jQuery 툴팁입니다.

https://jqueryui.com/tooltip/

이를 구현하려면 다음 단계를 따르십시오.

  1. <head></head>태그 에이 코드를 추가하십시오 .

    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$("[title]").tooltip();
</script>
<style type="text/css">

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
    display:none;
    background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff;
}
</style>

  2. 툴팁을 만들려는 HTML 요소에 title속성을 추가 하십시오. title 속성에있는 텍스트는 툴팁에 있습니다.

참고 : JavaScript가 비활성화되면 기본 브라우저 / 운영 체제 툴팁으로 대체됩니다.

답변

나는 div에도 적응할 수 있어야하는 것을했습니다.

HTML

<td>
    <%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
    <span class="showonhover">
        <a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>
        <span class="hovertext">
            <%# Eval("Name") %>
        </span>
    </span>
</td>

CSS

.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}

더 자세한 토론은 내 게시물을 참조하십시오.

마우스 오버시 간단한 형식화 된 툴팁 텍스트

답변

다음은 순수 CSS 3 구현입니다 (선택적 JS 포함).

“data-tooltip”이라는 div에 속성을 설정하기 만하면 텍스트 위에 마우스를 놓으면 해당 텍스트가 옆에 표시됩니다.

툴팁이 커서 근처에 표시되도록하는 선택적 JavaScript가 포함되어 있습니다. 이 기능이 필요하지 않으면이 바이올린의 JavaScript 부분을 무시해도됩니다.

호버 상태에서 페이드 인을 원하지 않으면 전환 속성을 제거하십시오 .

title속성 툴팁 과 같은 스타일 입니다. JSFiddle은 다음과 같습니다. http://jsfiddle.net/toe0hcyn/1/

HTML 예 :

<div data-tooltip="your tooltip message"></div>

CSS :

*[data-tooltip] {
    position: relative;
}

*[data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;

    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;

    display: block;
    font-size: 12px;
    line-height: 16px;
    background: #fefdcd;
    padding: 2px 2px;
    border: 1px solid #c0c0c0;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}

*[data-tooltip]:hover::after {
    opacity: 1;
}

마우스 위치 기반 툴팁 위치 변경을위한 선택적 JavaScript :

var style = document.createElement('style');
document.head.appendChild(style);

var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
    var attr = allElements[i].getAttribute('data-tooltip');
    if (attr) {
        allElements[i].addEventListener('mouseover', hoverEvent);
    }
}

function hoverEvent(event) {
    event.preventDefault();
    x = event.x - this.offsetLeft;
    y = event.y - this.offsetTop;

    // Make it hang below the cursor a bit.
    y += 10;

    style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px  }'

}

답변

다음은 모든 바운티 요구 사항입니다.

  • jQuery 없음
  • 즉시 등장
  • 마우스가 해당 영역을 벗어날 때까지 사라지지 않음
  • 페이드 인 / 아웃 효과 통합
  • 그리고 마지막으로 .. 간단한 해결책

다음은 데모 및 내 코드에 대한 링크입니다 (JSFiddle)

이 순수 JS, CSS 및 HTML5 바이올린에 통합 한 기능은 다음과 같습니다.

  • 페이드 속도를 설정할 수 있습니다.
  • 간단한 변수를 사용하여 툴팁의 텍스트를 설정할 수 있습니다.

HTML :

<div id="wrapper">
    <div id="a">Hover over this div to see a cool tool tip!</div>
</div>

CSS :

#a{
    background-color:yellow;
    padding:10px;
    border:2px solid red;
}

.tooltip{
    background:black;
    color:white;
    padding:5px;
    box-shadow:0 0 10px 0 rgba(0, 0, 0, 1);
    border-radius:10px;
    opacity:0;
}

자바 스크립트 :

var div = document.getElementById('wrapper');
var a = document.getElementById("a");
var fadeSpeed = 25; // a value between 1 and 1000 where 1000 will take 10
                    // seconds to fade in and out and 1 will take 0.01 sec.
var tipMessage = "The content of the tooltip...";

var showTip = function(){
    var tip = document.createElement("span");
    tip.className = "tooltip";
    tip.id = "tip";
    tip.innerHTML = tipMessage;
    div.appendChild(tip);
    tip.style.opacity="0"; // to start with...
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)+0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "1"){
            clearInterval(intId);
        }
    }, fadeSpeed);
};
var hideTip = function(){
    var tip = document.getElementById("tip");
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)-0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "0"){
            clearInterval(intId);
            tip.remove();
        }
    }, fadeSpeed);
    tip.remove();
};

a.addEventListener("mouseover", showTip, false);
a.addEventListener("mouseout", hideTip, false);