0

I want a custom title show.

Example: At first if the mouse is over title, the title doesn't show, then if I press and hold CTRL button and mouse over title, it will appear.

The question here is how can I do that ?

DarckBlezzer
  • 4,578
  • 1
  • 41
  • 51
  • 3
    Where is your code? What have you tried? Stack Overflow isn't a tutorial site. It's for if you have a specific question about some code you have. This is more of a question for Google. – Scott Marcus Feb 24 '18 at 19:29
  • @Scott Marcus the thing is that i didn't find anything and i don't know how to do it... – DarckBlezzer Feb 24 '18 at 19:33
  • 1
    I'm sorry about that, but it doesn't change what the purpose of Stack Overflow is or how it works. This simply isn't the place for this kind of question. You haven't posted any code? However, when I search Google for ["how to detect control key being pressed in javascript"](https://www.google.com/search?q=how+to+detect+control+key+being+pressed+in+javascript&rlz=1C1CHBF_enUS761US761&oq=how+to+detect+control+key+being+pressed+in+javascript&aqs=chrome..69i57j0.1294j0j7&sourceid=chrome&ie=UTF-8), I see quite a few helpful links. – Scott Marcus Feb 24 '18 at 19:35

2 Answers2

0

You can play around with keyup and down feature (for ctrl its 17) and also mouse over feature and simply alter css using jQuery. Here is a relevant link -- How to detect control+click in Javascript from an onclick div attribute?

Sunny Nirala
  • 9
  • 1
  • Please don't supply answers to bad questions. It just encourages more of the same. And really, this isn't an answer. It should be a comment. – Scott Marcus Feb 24 '18 at 19:51
0

I solve my problem with custom title, css and mouseover and mouseout events.

$("p").mouseover(function(evt) {
  if(evt.ctrlKey){
    console.log("test")
    var title = $(this).attr("t-hide");
    $(this).removeAttr("t-hide").attr('data-title', title);
  }
}).mouseout(function() {  
  var title = $(this).attr("data-title");
  $(this).removeAttr("data-title").attr('t-hide', title);
});
p:hover {
  position: relative;
}
p[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  box-shadow: 0px 0px 4px #222;
  background: #e4e4e4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p t-hide="Title Custom"> test </p>
  </body>
</html>

note: I do not recommend default title, when the mouse is over and you press some key the title is hidden...

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
DarckBlezzer
  • 4,578
  • 1
  • 41
  • 51