CSS에서 제목 속성 추가

CSS에서 제목 속성 추가

---

css에서 title = 'mandatory'를 다음에 추가하는 방법

     <label class='mandatory'>Name</label>

.mandatory
{
background-image:url(/media/img/required.gif);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
font-weight:bold;
}

---

당신은 할 수 없습니다. CSS는 프레젠테이션 언어입니다. 콘텐츠를 추가하도록 설계되지 않았습니다 ( :before및으로 매우 사소한 경우 제외 :after).

---

실제로 title 속성을 변경할 수는 없지만 CSS에서 완전히 툴팁을 표시 할 수 있습니다. http://jsfiddle.net/HzH3Z/5/ 에서 작동하는 버전을 확인할 수 있습니다 .

당신이 할 수있는 일은 label : after selector의 스타일을 지정하고 display : none을 지정하고 CSS에서 내용을 설정하는 것입니다. 그런 다음 표시 속성을 display : block on label : hover : after로 변경할 수 있으며 표시됩니다. 이렇게 :

label:after{
    content: "my tooltip";
    padding: 2px;
    display:none;
    position: relative;
    top: -20px;
    right: -30px;
    width: 150px;
    text-align: center;
    background-color: #fef4c5;
    border: 1px solid #d4b943;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
}
label:hover:after{
    display: block;
}

---

Quentin은 정확합니다. CSS로는 할 수 없습니다. title속성 을 추가 하려면 JavaScript로 할 수 있습니다. 다음은 jQuery를 사용하는 예입니다.

$('label').attr('title','mandatory');

---

jQuery로 할 수 있습니다.

$(document).ready(function() {
    $('.mandatory').each(function() {
        $(this).attr('title', $(this).attr('class'));
    });
});

---

Quentin과 다른 사람들이 제안했듯이 이것은 CSS로 완전히 할 수는 없습니다 (부분적으로 CSS의 콘텐츠 속성으로 수행됨). 대신 javascript / jQuery를 사용하여이를 달성해야합니다.

JS :

document.getElementsByClassName("mandatory")[0].title = "mandatory";

또는 jQuery 사용 :

$('.mandatory').attr('title','mandatory');

document.getElementsByClassName('mandatory')[0].setAttribute('title', 'mandatory');

$('.jmandatory').attr('title', 'jmandatory');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Place the Mouse Over the following elements to see the title,
<br/><br/>
<b><label class="mandatory">->Javascript Mandatory</label></b>
<br/><br/>
<b><label class="jmandatory">->jQuery Mandatory</label></b>

---

HTML & CSS로 모방 가능

정말로 동적으로 적용된 툴팁이 작동하기를 원한다면,이 (성능과 아키텍처 친화적이지 않은) 솔루션을 사용하면 JS에 의존하지 않고도 브라우저에서 렌더링 된 툴팁을 사용할 수 있습니다. 이것이 JS보다 더 나은 상황을 상상할 수 있습니다.

If you have a fixed subset of title attribute values, then you can generate additional elements server-side and let the browser read title from another element positioned above the original one using CSS.

Example:

div{
  position: relative;
}
div > span{
  display: none;
}

.pick-tooltip-1 > .tooltip-1, .pick-tooltip-2 > .tooltip-2{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

<div class="pick-tooltip-1">
  Hover to see first tooltip
  <span class="tooltip-1" title="Tooltip 1"></span>
  <span class="tooltip-2" title="Tooltip 2"></span>
</div>

<div class="pick-tooltip-2">
  Hover to see second tooltip
  <span class="tooltip-1" title="Tooltip 1"></span>
  <span class="tooltip-2" title="Tooltip 2"></span>
</div>

Note: It's not recommended for large scale applications because of unnecessary HTML, possible content repetitions and the fact that your extra elements for tooltip would steal mouse events (text selection, etc)

---

While currently not possible with CSS, there is a proposal to enable this functionality called Cascading Attribute Sheets.

참고URL : https://stackoverflow.com/questions/6136855/add-title-attribute-from-css