Display tooltip on Label s hover

Question

I have below HTML code     lt label for  male  gt Hello This Will Have Some Value lt  label gt    But actually i dont have enough space to show this much long label  So i thought of creating label as below     lt label for  male  gt Hello    lt  label gt    Then i create a hidden field which will hold entire label value   lt input type  hidden  name  Language  value  Hello This Will Have Some Value  gt    Now when user hovers mouse on Hello    can i show hidden field s value Hello This Will Have Some Value in tooltip using jquery   Thanks

User · Answer

You can use the css-property content and attr to display the content of an attribute in an  after pseudo element  You could either use the default title attribute  which is a semantic solution   or create a custom attribute  e g  data-title    HTML    lt label for  male  data-title  Please  refer to Wikipedia   gt Male lt  label gt    CSS   label data-title     position  relative     amp  hover after      font-size  1rem      font-weight  normal      display  block      position  absolute      left  -8em      bottom  2em      content   attr data-title       background-color  white      width  20em      text-aling  center

User · Answer

You can use the  title attribute  for label tag    lt label title  Hello This Will Have Some Value  gt Hello    lt  label gt    If you need more control over the looks    1   try http   getbootstrap com javascript  tooltips as shown below  But you will need to include bootstrap    lt button type  button  class  btn btn-default  data-toggle  tooltip  data-placement  left  title  Hello This Will Have Some Value  gt Hello    lt  button gt    2    try https   jqueryui com tooltip   But you will need to include jQueryUI    lt script type  text javascript  gt    document  ready function      this  tooltip         lt  script gt

User · Answer

Are you find with using standard tooltip  You could use title attribute like   lt label for  male  title  Hello This Will Have Some Value  gt Hello    lt  label gt    You could add the title attribute of same value to the element that label is for as well

User · Answer

If you also have jQuery UI  you can add this     document  ready function          document  tooltip          You then need a title instead of a hidden input  RGraham already posted an answer doing this for you  P

User · Answer

You don t have to use hidden field  Use  title  property  It will show browser default tooltip  You can then  use jQuery plugin  like before mentioned bootstrap tooltip  to show custom formatted tooltip    lt label for  male  title  Hello This Will Have Some Value  gt Hello     lt  label gt    Hint  you can also use css to trim text  that does not fit into the box  text-overflow property   See http   jsfiddle net 8eeHs

User · Answer

Just set a title on the label    lt label for  male  title  Hello This Will Have Some Value  gt Hello    lt  label gt    Using jQuery    lt label for  male  data-title  Language    gt   lt input type  hidden  name  Language  value  Hello This Will Have Some Value  gt      label   prop  title   function         return    input name        this  data  title           text          If you can use CSS3  you can use the text-overflow  ellipsis  to handle the ellipsis for you so all you need to do is copy the text from the label into the title attribute using jQuery   HTML    lt label for  male  gt Hello This Will Have Some Value lt  label gt    CSS   label       display  inline-block      width  50px      text-overflow  ellipsis      white-space  nowrap      overflow  hidden      jQuery      label   prop  title   function        return   this  text           Example  http   jsfiddle net Xm8Xe   Finally  if you need robust and cross-browser support  you could use the DotDotDot jQuery plugin

User · Answer

You could use the title attribute in html      lt label title  This is the full title of the label  gt This is the    lt  label gt    When you keep the mouse over for a brief moment  it should pop up with a box  containing the full title   If you want more control  I suggest you look into the Tipsy Plugin for jQuery - It can be found at http   onehackoranother com projects jquery tipsy  and is fairly simple to get started with

User · Answer

Tooltips in bootstrap are good  but there is also a very good tooltip function in jQuery UI  which you can read about here    Example    lt label for  male  id  foo  title  Hello This Will Have Some Value  gt Hello    lt  label gt    Then  assuming you have already referenced jQuery and jQueryUI libraries in your head  add a script element like this    lt script type  text javascript  gt    document  ready function          this  tooltip         lt  script gt    This will display the contents of the title attribute as a tooltip when you rollover any element with a title attribute

[javascript] Display tooltip on Label's hover?

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to html