javascript - 在CSS栏位中使用JavaScript变数的问题

我有一个关于在数据标题CSS字段中使用变量（在我的情况下为time2）的问题。
这是我需要的示例：http://jsfiddle.net/9oydvza0/1/
该变量取值为id time2的值我该怎么办？

来自链接的代码：
CSS：

<style>
.photo4 {
    display: inline-block;
    position: relative;
}
.photo4:hover:after {
    display: block;
    content: attr(data-title-id);
    position: absolute;
    left: 120%;
    bottom: -250%;
    z-index: 1;
    background: #003399;
    font-family: Segoe UI;
    font-weight: lighter;
    font-size: 13px;
    padding: 5px 10px;
    color: #fff;
    border: 1px solid #333;
    -moz-border-radius: 5px -webkit-border-radius: 5px;
    border-radius: 5px 5px 5px 5px;
}
</style>

Javascript：

<script>
     document.getElementById("time2").innerHTML = "ololo";
</script>

HTML：

<p id="time2"></p>
<div style="width:10px; float:left; padding-top:20px;">
    <div class="photo4" data-title-id="time2">
        <img src="http://placekitten.com/g/300/300" width="22" height="22px" />
    </div>
</div>
</div>

最佳答案

在CSS中，当您将鼠标悬停在class photo4上时，将显示其data-title-id contents,，并将其设置为html中的time2，因此肯定会显示time2，
因此将其设置为<div class="photo4" data-title-id="ololo">
或者，如果您想使用content of id time2动态设置
然后做这个

var myDiv=document.getElementById("time2")
myDiv.innerHTML = "ololo";

document.querySelector('.photo4').setAttribute("data-title-id", myDiv.innerHTML);

SEE DEMO HERE