The easiest way is to use the native [HTML `title` attribute][1]:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;img src=&quot;https://stackoverflow.com/favicon.ico&quot;
         style=&quot;cursor:pointer;&quot;
         title=&quot;Stack Overflow&quot;&gt;

&lt;!-- end snippet --&gt;

But if you need more, try the [tooltip](https://jqueryui.com/tooltip/) widget provided by jQuery UI since version 1.9.


  [1]: https://www.w3.org/TR/2016/REC-html51-20161101/dom.html#the-title-attribute

If you don&#39;t care much what the tooltip looks like you can always just use the &quot;title&quot; attribute

I have started my journey with TDD in Rails and have run into a small issue regarding tests for model validations that I can&#39;t seem to find a solution to. Let&#39;s say I have a User model,

    class User &lt; ActiveRecord::Base
      validates :username, :presence =&gt; true
    end

and a simple test

    it &quot;should require a username&quot; do
      User.new(:username =&gt; &quot;&quot;).should_not be_valid
    end

This correctly tests the presence validation, but what if I want to be more specific? For example, testing full_messages on the errors object..

    it &quot;should require a username&quot; do
      user = User.create(:username =&gt; &quot;&quot;)
      user.errors[:username].should ~= /can&#39;t be blank/
    end

My concern about the initial attempt (using should_not be_valid) is that RSpec won&#39;t produce a descriptive error message. It simply says &quot;expected valid? to return false, got true.&quot; However, the second test example has a minor drawback: it uses the create method instead of the new method in order to get at the errors object.

I would like my tests to be more specific about what they&#39;re testing, but at the same time not have to touch a database.

Anyone have any input?

Rails 3.1, RSpec: testing model validations

**Background:** 

As a Java programmer, I extensively inherit (rather: implement) from interfaces, and sometimes I design abstract base classes. However, I have never really felt the need to subclass a concrete (non-abstract) class (in the cases where I did it, it later turned out that another solution, such as [delegation][1] would have been better).

So now I&#39;m beginning to feel that there is almost no situation where inheriting from a concrete class is appropriate. For one thing, the [Liskov substitution principle][2] (LSP) seems almost impossible to satisfy for non-trivial classes; also [many][3] other [questions][4] here seem to echo a similar opinion.

**So my question:** 

In which situation (if any) does it actually make sense to inherit from a concrete class?
Can you give a concrete, real-world example of a class that inherits from another concrete class, where you feel this is the best design given the constraints? I&#39;b be particularly interested in examples that satisfy the LSP (or examples where satisfying LSP seems unimportant).

I mainly have a Java background, but I&#39;m interested in examples from any language.


  [1]: http://en.wikipedia.org/wiki/Delegation_pattern
  [2]: http://en.wikipedia.org/wiki/Liskov_substitution_principle
  [3]: https://stackoverflow.com/questions/269496/inheritance-vs-aggregation
  [4]: https://stackoverflow.com/questions/3887871/is-inheritence-of-concrete-classes-evil

Any good examples of inheriting from a concrete class?

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?

What is the easiest, cleanest way to create an HTML mouseover tool tip without using JavaScript?
<pre><code class="hljs language-css">&#x3C;img id=Pennstate src="/blah" style="cursor:pointer;">
</code></pre>
mouse over that and have a a nice tooltip "We are Pennstate!"

This should be simple, but I&#39;m having trouble finding the search terms for it.  
Let&#39;s say I have this:

    &lt;div class=&quot;a c&quot;&gt;Foo&lt;/div&gt;
    &lt;div class=&quot;b c&quot;&gt;Bar&lt;/div&gt;
   
In CSS, how can I create a selector that matches something that matches &quot;(.a or .b) and .c&quot;?

I know I could do this:  

    .a.c,.b.c {
      /* CSS stuff */
    }

But, assuming I&#39;m going to have to do this sort of logic a lot, with a variety of logical combinations, is there a better syntax?

CSS Selector &quot;(A or B) and C&quot;?

How to display XML and other type of data in same page ?

        &lt;?xml version=&quot;1.0&quot; encoding=&quot;ISO-8859-1&quot;?&gt;
    &lt;catalog&gt;
    	&lt;cd&gt;
    		&lt;title&gt;Empire Burlesque&lt;/title&gt;
    		&lt;artist&gt;Bob Dylan&lt;/artist&gt;
    		&lt;country&gt;USA&lt;/country&gt;
    		&lt;country&gt;Columbia&lt;/country&gt;
    		&lt;price&gt;10.90&lt;/price&gt;
    		&lt;year&gt;1985&lt;/year&gt;
    	&lt;/cd&gt;
    &lt;/catalog&gt;

The above XML should be displayed as it is with formatting. Also , I would like to display HTML tables and other stuff in my page. How to achieve this ?

 1. I do get XML in STRING not through file.
 2. I do not want to parse it
 3. I want to display (that&#39;s it)
 4. If you say about XSLT ( please give example )
 5. I&#39;m thinking to use Jquery plugin ( any examples?)

Display XML content in HTML page

 Is it a proper method to use a `&lt;span&gt;` tag inside an  `&lt;h1&gt;` tag?

     

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;h1&gt;
        &lt;span class=&quot;boardit&quot;&gt;Portfolio&lt;/span&gt;
    &lt;/h1&gt;

&lt;!-- end snippet --&gt;

I know we can write it in this way...and am also following the below syntax in my own website..

     

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;h1 class=&quot;boardit&quot;&gt;
      &lt;span&gt;Portfolio&lt;/span&gt;
    &lt;/h1&gt;

&lt;!-- end snippet --&gt;

However, I Just wanted to know the cleaner form of html..

Can we add a &lt;span&gt; inside an &lt;h1&gt; tag?

The information I need is in a meta tag. How can I access the `&quot;content&quot;` data of the meta tag when `property=&quot;video&quot;`?

**HTML:**

    &lt;meta property=&quot;video&quot; content=&quot;http://video.com/video33353.mp4&quot; /&gt;

How do I get the information from a meta tag with JavaScript?

I want to write fraction value such as the picture below:

![enter image description here][1]


  [1]: http://i.stack.imgur.com/sjKs8.jpg

How do I write fraction value using html without using image?

NOTE: I don&#39;t want this 1 1/2 pattern but strictly just as the pic above

How to write fraction value using html?

&#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

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

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?

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 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?

Content Type	Original Author	Original Content on Stackoverflow
Question	stackoverflow	View Question on Stackoverflow
Solution 1 - Html	Samich	View Answer on Stackoverflow
Solution 2 - Html	Jaime Garcia	View Answer on Stackoverflow

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

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Any good examples of inheriting from a concrete class?

Rails 3.1, RSpec: testing model validations

Attributions