Можно ли показать название при нажатии на div?

Question

Я бы хотел, чтобы заголовок (а не всплывающая подсказка) был «popup», когда пользователь нажимает мышью на div.

Я не хочу дождаться появления заголовка при наведении мыши (но это также должна быть указатель мыши).

<div id="someDiv" title ="Info on both click and hover!"></div> 

На данный момент я не волнует, как его сделали :-)

EDIT

Ok для резюмировать, что я пытаюсь сделать:

Мне нужно всплывающее название, как только я нажимаю на div, , но если я не нахожу на div, мне нравится, что название работает так же, как нет rmally с помощью мыши. Не должно быть сразу двух названий.

Это только одна из вещей, которые я пытался решить. У меня есть атрибут title .. но что теперь? Это, вероятно, что-то очень легко ...

$('#someDiv').click(function() { 
    $(this).attr("title"); 
    //And how do I show the title right away? 
}); 

Answer 1

Я создал функцию JQuery $ .hasTitle()

Эта новая функция взять родителю div.title вашего элемента и сделать следующий span.text работать как заголовок. Проверьте жить:

http://jsfiddle.net/t7kf6ge8/1/

---

ЯШ:

(function($) { 
    jQuery.fn.extend({ 
     hasTitle: function(){ 
      $(this).on("mouseenter mouseout", function(e){ 
       var title = $(this).closest("div.title"); 
       var text = title.next("span.text").first(); 
       text.fadeToggle().css({ 
        left: e.pageX, 
        top: e.pageY 
       }); 
      }); 
     } 
    }); 
})(jQuery); 



$("#elementOne").hasTitle(); 
$("#elementTwo").hasTitle(); 

---

HTML:

<div class="title"> 
    <div id="elementOne"> 
     elementOne 
    </div> 
</div><span class="text">Title: Info on hover!</span> 

<br/><br/><br/><br/> 

<div class="title"> 
    <ul id="elementTwo"> 
     <li>item 1</li> 
     <li>item 2</li> 
    </ul> 
</div><span class="text">It is a list</span> 

---

CSS: (код CSS вы можете изменить по своему предпочтению, только позицию: абсолютная требуется из-за мыши/эффекта курсора)

span.text{ 
    position: absolute; 
    display: none; 
    font-size: 10px; 
    font-family: Comic Sans MS; 
    background-color: #ccc; 
} 

---