attr이 아닌 CSS 내용 클래스

Question

현재 CSS로 작성된 도구 팁에 기존 마크 업을 전달하고 싶습니다. 현재 attr (title)을 사용하고 있지만 원하는 결과를 위해 마크 업을 복제해야합니다.

고려 :

.toolTip:hover:after{ 
    content: class(existing); //invalid I know! 
} 

TL : 내가 할 수 있도록하고 싶습니다 무엇

<p class="toolTip" title="this is a tooltip">hover over me</p> 
<p class="existing">this is a tool tip</p> 


.toolTip:hover:after{ 
    content: attr(title); 
} 

이 같은 것입니다 박사; 제목 속성을 사용하는 대신 클래스를 사용하여 기존 마크 업에서 내용을 가져 오려고합니다.

Answer 1

순수 CSS (또는 프리 프로세서 포함)를 사용하면 요소의 전체 텍스트 콘텐츠를 선택하고 content 속성에 지정할 실제 방법이 없습니다. content 속성은 미리 정의 된 문자열, URL, 속성 값 또는 카운터 만 값으로 가질 수 있습니다.

는 자동으로 필요한 클래스 (.existing)가 모든 요소에 toolTip 클래스와 title 속성을 추가하고 그 속성에있는 요소의 텍스트 내용을 지정 jQuery를 (또는 일반 바닐라 JS)를 사용할 수 있습니다. 이렇게하면 CSS 규칙을 복제 할 필요가 없습니다.

주 : 툴팁으로 실제 내용 자체를 설정하는 많은 지점이 없기 때문에이 제목 속성 그러나 당신이 더 필요 실제 시나리오에서 요소의 내용을 설정하는 방법에 대한 단순한 예입니다 .

---

다른 실시 예

$(document).ready(function() { 
 
    $('.existing').addClass('toolTip'); 
 
    $('.existing').each(function() { 
 
    $(this).attr('title', $(this).text()); 
 
    }); 
 
});

.toolTip:hover:after { 
 
    content: attr(title); 
 
    /* just for demo */ 
 
    position: relative; 
 
    left: 10px; 
 
    border: 1px solid green; 
 
    background: lightgreen; 
 
    padding: 2px; 
 
    border-radius: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="toolTip" title="this is a tooltip">hover over me</p> 
 
<p class="existing">this is a tool tip</p>

: 이것은 툴팁 요소의 내용과 다른 약간 다른 샘플이다. 여기에서 요소의 내용은 부모 내용이고 도구 설명 텍스트는 초기에 자식에 있습니다 (class="existing"). jQuery를 사용하면이 자식 span의 내용이 부모의 title 속성에 추가됩니다.

$(document).ready(function() { 
 
    $('.existing').parent().addClass('toolTip'); 
 
    $('.existing').each(function() { 
 
    $(this).parent().attr('title', $(this).text()); 
 
    }); 
 
});

.toolTip:hover:after { 
 
    content: attr(title); 
 
    /* just for demo */ 
 
    position: relative; 
 
    left: 10px; 
 
    border: 1px solid green; 
 
    background: lightgreen; 
 
    padding: 2px; 
 
    border-radius: 2px; 
 
} 
 
.existing { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="toolTip" title="this is a tooltip">hover over me</p> 
 
<p>hover over me <span class="existing">this is a tool tip</span> 
 
</p> 
 

 
<div>I have a tooltip too<span class="existing">See, I told you!</span> 
 
</div>