I&#39;m trying to show some data using a doughnut chart from Chart.js2.

My current chart looks like this:  
[![current chart][1]][1]

My desired output must show another attribute, which is the percentage, and looks like this:  
[![desired chart with percentage][2]][2]

I&#39;ve read the documentation, but I can&#39;t cope with this because it&#39;s very general and I&#39;m new to JavaScript.

My code for the first chart is the following:

    const renderCashCurrencyPie = (cashAnalysisBalances) =&gt; {
      if (cashAnalysisBalances) {
        const currenciesName = cashAnalysisBalances
        .map(curName =&gt; curName.currency);
    
        const availableCash = cashAnalysisBalances
        .map(avCash =&gt; avCash.availableCash);
    
        let currenciesCounter = 0;
        for (let i = 0; i &lt; currenciesName.length; i += 1) {
          if (currenciesName[i] !== currenciesName[i + 1]) {
            currenciesCounter += 1;
          }
        }
    
        const currenciesData = {
          labels: currenciesName,
          datasets: [{
            data: availableCash,
            backgroundColor: [
              &#39;#129CFF&#39;,
              &#39;#0C6DB3&#39;,
              &#39;#FF6384&#39;,
              &#39;#00FFFF&#39;
            ],
            hoverBackgroundColor: [
              &#39;#FF6384&#39;,
              &#39;#36A2EB&#39;,
              &#39;#FFCE56&#39;,
              &#39;#00FFFF&#39;
            ]
          }]
        };

[1]: https://i.stack.imgur.com/0VHP3.png
[2]: https://i.stack.imgur.com/aM5mq.png

How to customize the tooltip of a Chart.js 2.0 Doughnut Chart?

I have a UI widget that needs to be put in an IFRAME both for performance reasons and so we can syndicate it out to affiliate sites easily. The UI for the widget includes tool-tips that display over the top of other page content. See screenshot below or **[go to the site][1]** to see it in action.  Is there any way to make content from within the IFRAME overlap the parent frame&#39;s content?

![Tool-tip content needs to overlap parent frame content][2]


  [1]: http://www.bookabach.co.nz/
  [2]: https://i.stack.imgur.com/8rAnj.png

Is there a way to have content from an IFRAME overflow onto the parent frame?

How to add line break in tooltip 
I have implemented the Tooltip but i am not able to add multi line or line breaks in tooltip.Below is my code

http://codepen.io/apps4any/pen/RWQLyr

Html

    &lt;div ng-controller=&quot;AppCtrl&quot; ng-cloak=&quot;&quot; class=&quot;tooltipdemoBasicUsage&quot; ng-app=&quot;MyApp&quot;&gt;
      &lt;md-content layout-padding=&quot;&quot;&gt;
        &lt;md-button class=&quot;md-fab md-fab-top-right right&quot; aria-label=&quot;Photos&quot;&gt;
          &lt;md-icon md-svg-src=&quot;img/icons/ic_photo_24px.svg&quot; style=&quot;width: 24px; height: 24px;&quot;&gt;&lt;/md-icon&gt;
          &lt;md-tooltip&gt;
            List1&lt;br&gt;
            List2&lt;br&gt;
            List3&lt;br&gt;
            List4
          &lt;/md-tooltip&gt;
        &lt;/md-button&gt;
        &lt;div style=&quot;margin-top: 150px;&quot;&gt;
        &lt;/div&gt;
      &lt;/md-content&gt;
    &lt;/div&gt;

CSS:

    .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover {
      box-shadow: none;
      border: none;
      transform: none;
      -webkit-transform: none; }
    .tooltipdemoBasicUsage .left {
      top: 70px !important;
      left: 56px !important; }
    .tooltipdemoBasicUsage .right {
      top: 70px !important;
      right: 56px !important; }

JS

    angular.module(&#39;MyApp&#39;)
    .controller(&#39;AppCtrl&#39;, function($scope) {
      $scope.demo = {};
    });



How to add line breaks within tooltip in angular material design

I would add a right-tooltip from twitter bootstrap to an icon element.

The code is this:

    &lt;h3&gt;Sensors Permissions &lt;i class=&quot;icon-info-sign&quot;&gt;&lt;/i&gt;&lt;/h3&gt;

I would that, when the cursor is over the icon, is shown a right tooltip with some informations...

How can I do? It&#39;s not enough include the tooltip.js librery and put a &lt;a href=....&gt; element in the icon code? I&#39;m confused.

Thank you.

How to add a twitter bootstrap tooltip to an icon

I am very new to web development, and I cannot figure out how to solve the following issue, although it may be very easy.

I am using Angular 4 and Angular Material to implement tooltips like this:

    &lt;div mdTooltip=&quot;tooltip text&quot; mdTooltipPosition=&quot;above&quot;&gt;
      &lt;span&gt;Show tooltip&lt;/span&gt;
    &lt;/div&gt;

I would like to make the font size of the tooltip text bigger. However, I did not manage to find how to do this in the Angular Material documentation, neither searching in the web. Does anyone have any idea on how to do this? Thanks.

Set font size of Angular Material Tooltip

How can I style MUI `Tooltip` text? The default tooltip on hover comes out black with no text-wrap. Is it possible to change the background, color etc? Is this option even available?



How to style MUI Tooltip?

I have got a span with dynamic data in my page, with `ellipsis` style.

&lt;pre&gt;&lt;code&gt;.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}
&lt;/code&gt;&lt;/pre&gt;


    &lt;span id=&quot;myId&quot; class=&quot;my-class&quot;&gt;&lt;/span&gt;

&lt;pre&gt;&lt;code&gt;document.getElementById(&#39;myId&#39;).innerText = &quot;...&quot;;&lt;/code&gt;&lt;/pre&gt;

I&#39;d like to add to this element tooltip with the same content, but I want it to appear only when the content is long and the ellipsis appear on screen.
&lt;br&gt;&lt;br&gt;
Is there any way to do it?&lt;br&gt;
Does the browser throw an event when `ellipsis` is activated?

*Browser: Internet Explorer

HTML - how can I show tooltip ONLY when ellipsis is activated

I have a tooltip on an anchor element, that sends an AJAX request on click. This element has a tooltip (from Twitter Bootstrap). I want the tooltip content to change when the AJAX request returns successfully. How can I manipulate the tooltip after initiation?

Change Twitter Bootstrap Tooltip content on click

How can I display a tooltip over a button using [Windows Forms][1]?

  [1]: http://en.wikipedia.org/wiki/Windows_Forms


Display a tooltip over a button using Windows Forms

How can line breaks be added within a HTML tooltip?

I tried using `&lt;br/&gt;` and `\n` within the tooltip as follows: 

    &lt;a href=&quot;#&quot; title=&quot;Some long text &lt;br/&gt; Second line text \n Third line text&quot;&gt;Hover me&lt;/a&gt;

However, this was useless and I could see the literal text `&lt;br/&gt;` and `\n` within the tooltip. Any suggestions will be helpful.

Add line break within tooltips

I created a tooltip using Twitter Bootstrap.

The tooltip is displaying with three lines. However, I would like to display the tooltip with only one line.

How do I change the width of the tooltip? Is this specific to Twitter Bootstrap or to tooltips themselves?

How do you change the width and height of Twitter Bootstrap&#39;s tooltips?

I would like to display a `ToolTip` for when the mouse is hovering over a control.

How does one create a tooltip in code, but also in the designer?  

How do I add a ToolTip to a control?

I have a set of data that I am plotting in a scatter.  When I mouseover one of the circles I would like it to popup with data (like x, y values, maybe more).  Here is what I tried using:

    vis.selectAll(&quot;circle&quot;)
       .data(datafiltered).enter().append(&quot;svg:circle&quot;)
       .attr(&quot;cx&quot;, function(d) { return x(d.x);})
       .attr(&quot;cy&quot;, function(d) {return y(d.y)})
       .attr(&quot;fill&quot;, &quot;red&quot;).attr(&quot;r&quot;, 15)
       .on(&quot;mouseover&quot;, function() {
            d3.select(this).enter().append(&quot;text&quot;)
                .text(function(d) {return d.x;})
                .attr(&quot;x&quot;, function(d) {return x(d.x);})
                .attr(&quot;y&quot;, function (d) {return y(d.y);}); });

I suspect I need to be more informative about what data to enter?

Show data on mouseover of circle

I am using the tooltip. But I want that on image tag, like when I mouseover the image then the tooltip should work. I have tried but not working for me on image tag.

Tooltip on image

If I check [official documentation][1], I can see a property called HTML:

    Name    |    Type       |    default  |    Description
    ----------------------------------------------------------------------------
    html    |    boolean    |    false    |    Insert html into the tooltip. 
                                               If false, jquery&#39;s text method 
                                               will be used to insert content 
                                               into the dom. Use text if you&#39;re 
                                               worried about XSS attacks.

It says, &quot;insert html into the tooltip&quot;, but the type is boolean. How can I use complex html inside a Tooltip?


  [1]: http://twitter.github.com/bootstrap/javascript.html#tooltips

Can I use complex HTML with Twitter Bootstrap&#39;s Tooltip?

I have a div tag like this:

```html
&lt;div&gt;
  &lt;label&gt;Name&lt;/label&gt;
  &lt;input type=&quot;text&quot;/&gt;
&lt;/div&gt;
```

How can I displaying a tooltip on `:hover` of the div, preferably with a fade in/out effect.

Add a tooltip to a div

I have a problem with bootstrap&#39;s tooltip : When I click on a button, tooltip stays even if is the cursor is outside of the button. I have looked into the manual - [Bootstrap&#39;s tooltip][1] and if I&#39;m clicking on the buttons, I see the same problem. Is there any solution to fix this? Just tried in latest FF, IE.


  [1]: http://getbootstrap.com/javascript/#four-directions

Bootstrap&#39;s tooltip doesn&#39;t disappear after button click &amp; mouseleave

I have a tooltip for a Label and I want it to stay open until the user
moves the mouse to a different control.

I have tried the following properties on the tooltip:

    StaysOpen=&quot;True&quot;

and

    ToolTipService.ShowDuration = &quot;60000&quot;

But in both cases the tooltip is only displayed for exactly 5 seconds.

Why are these values being ignored?




Forcing a WPF tooltip to stay on the screen

I have a series of svg rectangles (using D3.js) and I want to display a message on mouseover, the message should be surrounded by a box that acts as background. They should both be perfectly aligned to each other and to the rectangle (on top and centered). What is the best way to do this?

I tried adding an svg text using the &quot;x&quot;, &quot;y&quot;, &quot;width&quot; and &quot;height&quot; attributes, and then prepending an svg rect. The problem is that the reference point for the text is in the middle (since I want it centered aligned I used `text-anchor: middle`), but for the rectangle it&#39;s the top left coordinate, plus I wanted a bit of margin around the text which makes it kind of a pain.

The other option was using an html div, which would be nice, because I can add the text and padding directly but I don&#39;t know how to get the absolute coordinates for each rectangle. Is there a way to do this?

How to add a tooltip to an svg graphic?

I&#39;m trying to display tooltips in Java which may or may not be paragraph-length.  How can I word-wrap long tooltips?

Multi-line tooltips in Java?

Is it possible to format an HTML tooltip?

E.g. I have a DIV with attribute title=&quot;foo!&quot;.  When I have text-size of my browser zoomed in or out in, the text size of the tooltip remains unchanged.  Is there a way to make the tooltip font scale with the browser setting?

Is it possible to format an HTML tooltip (title attribute)?

I just came across a neat CSS trick. Check out the fiddle...

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .tooltiptail {
      display: block;
      border-color: #ffffff #a0c7ff #ffffff #ffffff;
      border-style: solid;
      border-width: 20px;
      width: 0px;
      height: 0px;
    }
    .anothertail {
      background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
      display: block;
      height: 29px;
      width: 30px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;Cool Trick:
      &lt;br /&gt;
      &lt;div class=&quot;tooltiptail&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;br /&gt;

    &lt;div&gt;How do I get this effect with only CSS?
      &lt;br /&gt;
      &lt;div class=&quot;anothertail&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

This creates a little arrow/triangle-like effect, a &quot;tooltip tail&quot;. This blows my mind! **I&#39;m really interested in knowing how this works?!**

Further, is there a way to extend this CSS trick to create an effect as follows:

![enter image description here][1]

This is an interesting problem. Can this be done using only CSS, ignoring the shadow for now?


----------


UPDATE 1
-----------------------

I figured out a solution to my initial question. Here&#39;s the fiddle... 

http://jsfiddle.net/duZAx/7/

HTML

    &lt;div style=&quot;position: relative;&quot;&gt;Cool Trick:&lt;br /&gt;
        &lt;div class=&quot;tooltiptail&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;tooltiptail2&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

CSS

    .tooltiptail {
        display: block;
        border-color: #ffffff #a0c7ff #ffffff #ffffff;
        border-style: solid;
        border-width: 20px;
        width: 0px;
        height: 0px;
    }
    .tooltiptail2 {
        display: block;
        border-color: transparent #ffffff transparent transparent;
        border-style: solid;
        border-width: 18px;
        width: 0px;
        height: 0px;
        position: relative;
        left: 4px;
        top: -38px;
    }

Now, how do I exactly mimic the little picture above using pure CSS, including the shadow and having it cross-browser compatible?


----------


UPDATE 2
---------------------------

Here&#39;s my solution after a combination of the answers below. I haven&#39;t tested it across multiple browsers, but it looks great in Chrome. 

http://jsfiddle.net/UnsungHero97/MZXCj/688/

HTML

    &lt;div id=&quot;toolTip&quot;&gt;
        &lt;p&gt;i can haz css tooltip&lt;/p&gt;
        &lt;div id=&quot;tailShadow&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;tail1&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;tail2&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

CSS
    
    #toolTip {
        background-color: #ffffff;
        border: 1px solid #73a7f0;
        width: 200px;
        height: 100px;
        margin-left: 32px;
        position:relative;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        box-shadow: 0px 0px 8px -1px black;
        -moz-box-shadow: 0px 0px 8px -1px black;
        -webkit-box-shadow: 0px 0px 8px -1px black;
    }
    
    #toolTip p {
        padding:10px;
    }
    
    #tailShadow {
        background-color: transparent;
        width: 4px;
        height: 4px;
        position: absolute;
        top: 16px;
        left: -8px;
        z-index: -10;
        box-shadow: 0px 0px 8px 1px black;
        -moz-box-shadow: 0px 0px 8px 1px black;
        -webkit-box-shadow: 0px 0px 8px 1px black;
    }
    
    #tail1 {
        width: 0px;
        height: 0px;
        border: 10px solid;
        border-color: transparent #73a7f0 transparent transparent;
        position:absolute;
        top: 8px;
        left: -20px;
    }
    
    #tail2 {
        width: 0px;
        height: 0px;
        border: 10px solid;
        border-color: transparent #ffffff transparent transparent;
        position:absolute;
        left: -18px;
        top: 8px;
    }

----------


  [1]: http://i.stack.imgur.com/zRBKQ.png



How can I create a &quot;tooltip tail&quot; using pure CSS?

It seems that the `Label` has no `Hint` or `ToolTip` or `Hovertext` property. So what is the preferred method to show a hint, tooltip, or hover text when the `Label` is approached by the mouse?

How can I add a hint or tooltip to a label in C# Winforms?

Either using plain HTML or jQuery assisted JavaScript, how do you display tooltips on individual `&lt;option&gt;` elements to aid the decision process (*there is not enough room for a different kind of control and some help will be needed*).

Can this be done though a plug-in or similar?

I have tried a few tooltip plugins for jQuery with no success (including the one called Tooltip).

This solution should:

 - work in IE, WebKit as well as Gecko;
 - utilizing standard `&lt;select&gt;` wrapped `&lt;option&gt;` elements.

So if the solution wants to use other tags it should convert those elements into what it needs dynamically (and not expect the initial mark-up to be any different).


----------


The code for this can be found [here][1], it is under the SafeSurf section, where I want to display some help on rollover of the options as to the meaning of the choices. At present it can only be displayed &quot;after the fact&quot; and some upfront help for the user would be beneficial.

**Appreciate that this is not easy and that something will probably need to be created - so the bounty will be awarded to the most complete solution or the specific hook that lands me closest to a solution I can create.**


  [1]: https://jsfiddle.net/vaRAA/

How can I display a tooltip on an HTML &quot;option&quot; tag?

&gt; **Note:**   
&gt; Depending on you Bootstrap version (prior to 3.3 or not), you may need a different answer.  
&gt; Pay attention to the notes.

When I activate tooltips (hover over the cell) or popovers in this code, size of table is increasing. How can I avoid this?

Here emptyRow - function to generate tr with 100 &lt;d, each containing tooltip

    &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;http://twitter.github.com/bootstrap/assets/css/bootstrap.css&quot;&gt;
        &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; src=&quot;http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js&quot;&gt;&lt;/script&gt;
        &lt;style&gt;    
        #matrix td {
            width: 10px;
            height: 10px;
            border: 1px solid gray; 
            padding: 0px; 
        }
        &lt;/style&gt;
    &lt;script&gt;
    function emptyRow() {
            str = &#39;&lt;tr&gt;&#39;
            for (j = 0; j &lt; 100; j++) {
                str += &#39;&lt;td rel=&quot;tooltip&quot; data-original-title=&quot;text&quot;&gt;&lt;/td&gt;&#39;
            }
            str += &#39;&lt;/tr&gt;&#39;
            return str
        }
        $(document).ready(function () {
            $(&quot;#matrix tr:last&quot;).after(emptyRow())
            $(&quot;[rel=tooltip]&quot;).tooltip();
        });
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body style=&quot;margin-top: 40px;&quot;&gt;
    &lt;table id=&quot;matrix&quot;&gt;
        &lt;tr&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/body&gt;
    &lt;/html&gt;


thank in advice!

bootstrap &quot;tooltip&quot; and &quot;popover&quot; add extra size in table

I currently set the `title` attribute of some HTML if I want to provide more information:

    &lt;p&gt;An &lt;span class=&quot;more_info&quot; title=&quot;also called an underscore&quot;&gt;underline&lt;/span&gt; character is used here&lt;/p&gt;

Then in CSS:

    .more_info {
      border-bottom: 1px dotted;
    }

Works very nice, visual indicator to move the mouse over and then a little popup with more information.  But on mobile browsers, I don&#39;t get that tooltip.  `title` attributes don&#39;t seem to have an effect.  What&#39;s the proper way to give more information on a piece of text in a mobile browser?  Same as above but use Javascript to listen for a click and then display a tooltip-looking dialog? Is there any native mechanism?

Tooltips for mobile browsers

How to align the tooltip the natural style: right bottom of the mouse pointer?

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Tooltip with Image&lt;/title&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;style type=&quot;text/css&quot;&gt;
        .tooltip {
            text-decoration:none;
            position:relative;
        }
         .tooltip span {
            display:none;
        }
         .tooltip span img {
            float:left;
        }
         .tooltip:hover span {
            display:block;
            position:absolute;
            overflow:hidden;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;a class=&quot;tooltip&quot; href=&quot;http://www.google.com/&quot;&gt;
        Google
        &lt;span&gt;
          &lt;img alt=&quot;&quot; src=&quot;http://www.google.com/images/srpr/logo4w.png&quot;&gt;
        &lt;/span&gt;
      &lt;/a&gt;
    &lt;/body&gt;
    &lt;/html&gt;

HTML-Tooltip position relative to mouse pointer

&#191;How can I add a breakline to a text inside a tooltip in XAML?

I try with this:

            &lt;Label Name=&quot;label4&quot; UseLayoutRounding=&quot;False&quot; Focusable=&quot;False&quot; AllowDrop=&quot;False&quot; Foreground=&quot;Black&quot; Margin=&quot;6,44,132.027,76&quot; ToolTipService.ShowDuration=&quot;12000&quot;&gt;
                    &lt;Label.ToolTip&gt;
                        &lt;ToolTip&gt;
                        &lt;TextBlock&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/TextBlock&gt;
                        &lt;TextBlock&gt;Suspendisse eget urna eget elit ullamcorper tincidunt. Sed nec arcu sed ante sodales &lt;/TextBlock&gt;
                        &lt;TextBlock&gt;Pellentesque elit libero, semper ac tincidunt vitae, euismod at ligula.&lt;/TextBlock&gt;
                        &lt;/ToolTip&gt;
                    &lt;/Label.ToolTip&gt;
                &lt;Label.Content&gt;
                    &lt;TextBlock TextAlignment=&quot;Right&quot; TextWrapping=&quot;Wrap&quot; Height=&quot;19&quot; Width=&quot;108&quot; &gt;Lorem Ipsum&lt;/TextBlock&gt;
                &lt;/Label.Content&gt;
            &lt;/Label&gt;

But doesn&#39;t works:

Add a breakline in tooltip

What is the easiest, cleanest way to create an HTML mouseover tool tip without using JavaScript?


    &lt;img id=Pennstate src=&quot;/blah&quot; style=&quot;cursor:pointer;&quot;&gt;


mouse over that and have a a nice tooltip &quot;We are Pennstate!&quot;

What is the easiest way to create an HTML mouseover tool tip?

I&#39;m using WPFtoolkit `DataGrid` ,I have to wrap text in a `DataGridTextColumn` or 
I have to add a `ToolTip` to the text column.  I have searched the net but i couldn&#39;t get a proper solution.  Expecting your valuable suggestions...

How do I Add a Tooltip To a DataGridTextColumn

I&#39;m trying to over ride the default error message label with a div instead of a label. I have looked at [this post][1] as well and get how to do it but my limitations with CSS are haunting me. How can I display this like some of these examples:

[Example #1 (Dojo)][2] - Must type invalid input to see error display&lt;br /&gt;
[Example #2][3]

Here is some example code that overrides the error label to a div element

        

    $(document).ready(function(){
                $(&quot;#myForm&quot;).validate({
                    rules: {
                        &quot;elem.1&quot;: {
                            required: true,
                            digits: true
                        },
                        &quot;elem.2&quot;: {
                            required: true
                        }
                    },
                    errorElement: &quot;div&quot;
                });                  
            });

Now I&#39;m at a loss on the css part but here it is:

    div.error {
            position:absolute;
            margin-top:-21px;
         margin-left:150px;
         border:2px solid #C0C097;
            background-color:#fff;
            color:white;
            padding:3px;
            text-align:left;
            z-index:1;
            color:#333333;
         font:100% arial,helvetica,clean,sans-serif;
         font-size:15px;
         font-weight:bold;  
        }


UPDATE:

Okay I&#39;m using this code now but the image and the placement on the popup is larger than the border, can this be adjusted to be dynamic is height?

    if (element.attr(&#39;type&#39;) == &#39;radio&#39; || element.attr(&#39;type&#39;) == &#39;checkbox&#39;) {
       element = element.parent();
    
       offset = element.offset();
       error.insertBefore(element)
       error.addClass(&#39;message&#39;);  // add a class to the wrapper
       error.css(&#39;position&#39;, &#39;absolute&#39;);
       error.css(&#39;left&#39;, offset.left + element.outerWidth());
       error.css(&#39;top&#39;, offset.top - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox
    } else {
       // Error placement for single elements
       offset = element.offset();
       error.insertBefore(element)
       error.addClass(&#39;message&#39;);  // add a class to the wrapper
       error.css(&#39;position&#39;, &#39;absolute&#39;);
       error.css(&#39;left&#39;, offset.left + element.outerWidth());
       error.css(&#39;top&#39;, offset.top - (element.height() / 2));
    }

the css is the same as below (your css code)

Html

    &lt;span&gt;
    &lt;input type=&quot;radio&quot; class=&quot;checkbox&quot; value=&quot;P&quot; id=&quot;radio_P&quot; name=&quot;radio_group_name&quot;/&gt;
    &lt;label for=&quot;radio_P&quot;&gt;P&lt;/label&gt;
    &lt;input type=&quot;radio&quot; class=&quot;checkbox&quot; value=&quot;S&quot; id=&quot;radio_S&quot; name=&quot;radio_group_name&quot;/&gt;
    &lt;label for=&quot;radio_S&quot;&gt;S&lt;/label&gt;
    &lt;/span&gt;



  [1]: https://stackoverflow.com/questions/309574/jquery-validation-how-to-not-display-errors-or-how-to-display-errors-as-a-toolt
  [2]: http://www.dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-validation-specialized-input/textbox-validating-currency-number
  [3]: http://www.scriptiny.com/2008/04/dynamic-inline-javascript-form-validation/

jQuery override default validation error message display (Css) Popup/Tooltip like

I&#39;m currently adding verbose tooltips to our site, and I&#39;d like (without having to resort to a whizz-bang jQuery plugin, I know there are many!) to use carriage returns to format the tooltip.

To add the tip I&#39;m using the `title` attribute. I&#39;ve looked around the usual sites and using the basic template of:

    &lt;a title=&#39;Tool?Tip?On?New?Line&#39;&gt;link with tip&lt;/a&gt;

I&#39;ve tried replacing the `?` with:

- `&lt;br /&gt;`
- `&amp;013; / &amp;#13;`
- `\r\n`
- `Environment.NewLine` (I&#39;m using C#)

None of the above works. Is it possible?

How can I use a carriage return in a HTML tooltip?

Is it possible to create a tooltip for an html button. Its the normal HTML button and there is no Title attribute as it is there for some html controls. Any thoughts or comments?

Tooltips for Button elements

There are plenty of JavaScript-based libraries that show tooltips when you hover your mouse over a certain area of a web page. Some are rather plain, some allow the tooltip to display HTML content styled with CSS.

But is there a way to show a styled tooltip without using JavaScript? If you just use the `title` attribute, tags are not processed (e.g. `foo&lt;br /&gt;bar` doesn&#39;t produce a line break). I&#39;m looking for a solution that allows one to display styled HTML content without using any JavaScript.

Tooltip with HTML content without JavaScript

I have a HTML button. I have tried to render a tooltip on it based on the &quot;title&quot; attribute of the button and it doesn&#39;t render. Mainly because it&#39;s disabled. 

I then tried wrapping the button in a span and setting the &quot;title&quot; attribute of the span. 

Hovering over the button that is wrapped in the span still has no effect. The tooltip will render on any other part of the span that is not part of the button tag. Like if I put some text in the span as well as the button, hovering over the text produces the tooltip, but if you hover over the button it will not render.

So: how can I display a tooltip for a disabled button?

How do you render tooltip on disabled HTML Button

Tooltips are those little bits of text that popup when the mouse hovers over a widget for a certain duration of time.

How can I add a tooltip message to my `tkinter` Python application?

[![Example of tooltip][2]][2]


  [1]: https://en.wikipedia.org/wiki/Tooltip
  [2]: https://i.stack.imgur.com/kDJAO.png

How do I display tooltips in Tkinter?

When I hover over a button and the tooltip appears, the buttons jump. If I disable the tooltip, it does not jump.  Additionally, the right button loses the rounded edges.  How can I prevent this from happening?

    &lt;div class=&quot;btn-group&quot;&gt;
        &lt;a rel=&quot;tooltip&quot; class=&quot;btn&quot; href=&quot;#&quot; data-title=&quot;View Details&quot;&gt;&lt;i class=&quot;icon-list-alt&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a rel=&quot;tooltip&quot; class=&quot;btn&quot; href=&quot;#&quot; data-title=&quot;Delete&quot;&gt;&lt;i class=&quot;icon-trash&quot;&gt;    &lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt; 

Javascript:

    $(&#39;[rel=tooltip]&#39;).tooltip();

Working version...

http://jsfiddle.net/BA4zM/147/

Here is a website that has it working without the jumping...

http://wrapbootstrap.com/preview/WB005S479

Bootstrap tooltip causing buttons to jump

I am using the CSS.Tooltips library to try an get a tooltip to show up on an input tag.  I can get it to work on a p tag but not an input tag.  Any ideas?

Here is link to the fiddle: http://jsfiddle.net/cwlanca/BumU5/1/

**Code**

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    [data-tip] {
      position:relative;

    }
    [data-tip]:before {
      content:&#39;&#39;;
      /* hides the tooltip when not hovered */
      display:none;
      content:&#39;&#39;;
      display:none;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid #1a1a1a;
      position:absolute;
      top:30px;
      left:35px;
      z-index:8;
      font-size:0;
      line-height:0;
      width:0;
      height:0;
      position:absolute;
      top:30px;
      left:35px;
      z-index:8;
      font-size:0;
      line-height:0;
      width:0;
      height:0;
    }
    [data-tip]:after {
      display:none;
      content:attr(data-tip);
      position:absolute;
      top:35px;
      left:0px;
      padding:5px 8px;
      background:#1a1a1a;
      color:#fff;
      z-index:9;
      font-size: 0.75em;
      height:18px;
      line-height:18px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      white-space:nowrap;
      word-wrap:normal;
    }
    [data-tip]:hover:before,
    [data-tip]:hover:after {
      display:block;
    }

&lt;!-- language: lang-html --&gt;

    &lt;p data-tip=&quot;This is the text of the tooltip&quot;&gt;This is a paragraph of text that has a tooltip.&lt;/p&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;/br&gt;
    &lt;input data-tip=&quot;This is the text of the tooltip&quot; value=&quot;44&quot;/&gt;


&lt;!-- end snippet --&gt;



Adding a tooltip to an input box

Tooltips are an incredibly useful interface paradigm to know an application. They are the mapping between the visual control and the application specific action associated to that control. The user can explore the action without invoking it just by hovering the mouse pointer.

The touch devices make this paradigm basically impossible. This limits the usability of the app, which becomes in some cases pretty mysterious. 

Do you know if a substitute for the tooltip concept exists for touch devices? They effectively lack one degree of freedom in ui interaction: the pointer position. How to regain this communication channel effectively?

Tooltips in the era of touch

Has anyone here added tooltips to font-awesome icons?

I have the [following jsfiddle][1], but cannot seem to find a guide to add tooltips to the icons.



  [1]: https://jsfiddle.net/HarrietFiddles/1btr64kw/1/

    &lt;header&gt;
      &lt;!-- icons for settings, change pwd and list of active sessions --&gt;
      &lt;div id=&quot;menuIcons&quot;&gt;
        &lt;i class=&quot;fa fa-cog&quot;&gt;&lt;/i&gt;
        &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
        &lt;i class=&quot;fa fa-lock&quot;&gt;&lt;/i&gt;
      &lt;/div&gt;
  
      &lt;!-- display welcome text --&gt;
      &lt;div id=&quot;welcomeText&quot;&gt;
        &lt;p&gt;Welcome Harriet&lt;/p&gt;
      &lt;/div&gt;
  
    &lt;/header&gt;


Add tooltip to font awesome icon

How do I create a menu which looks like so:

![Tooltip Image][1]

[Link to PSD][2]

I don&#39;t want to use the PSD images. I would prefer using icons from some package like [FontAwesome][3] and have the backgrounds/css generated in CSS.

A version of the menu that is using the PSD to to generate images of the tooltip and then using it can be found [here][4].

  [1]: http://i.stack.imgur.com/hb5aQ.png
  [2]: http://dribbble.com/shots/732391-Tooltip-PSD
  [3]: http://fortawesome.github.com/Font-Awesome/
  [4]: http://theearlcarlson.com/experiments/amTooltip/

All Tooltip Solutions on Gang of Coders

Total of 41 Tooltip Solutions