JQuery tooltip that supports new line

Question

I'm looking for a lightweight jquery plugin for displaying tooltips when the user hovers over an element. I would like the plugin to get the content from the title attribute and also it's important that I can make new lines.

Any help is appreciated!

Answer 1

I usually use tipsy.

---

You can add any html element in tipsy, so <br/> works.

You just need to pass the html option as such :

$('#example-html').tipsy({html: true });

If you don't want to use the title attribute to display html (it won't validate in this case), you can use the fallback option.

$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'? <br/> yay !" });

More options and examples on the tipsy webpage.

Answer 2

Most browsers (not Firefox or Opera - newlines will disappear) support newlines in the title attribute.

If your plugin doesn't render them as <br />, do this on the text first...

var tooltip = $('#whatever').attr('title').replace(/\n/g, '<br />');

... and then pass tooltip to your tooltip library (e.g. qTip).

Answer 3

http://elliotlings.com/jquery/tooltip is a good tooltip to manage tooltips which need to hold more content

Answer 4

Simple custom jQuery extension:

$.fn.extend({
  myToolTip: function() {
    this.hover(
      // mouse in ...
      function () { 
        var $this = $(this);
        if ($this.attr("title")) {
          $this.data("$tooltip", $("<div class='myToolTip'></div>")
            .text($this.attr("title"))
            .html(function(i, html) { return html.replace(/\n/g, "<br/>"); })
            .css({
              position: "absolute", 
              top: $this.position().top + $this.outerHeight(), 
              left: $this.position().left
            })
            .appendTo("body")
          );
        }
      },
      // mouse out ...
      function () {
        var $tooltip = $(this).data("$tooltip");
        if ($tooltip) $tooltip.remove();
      }
    );
  }
});

This creates a <div class="myToolTip"> (use CSS to style it) and positions it beneath the element in question on mouseenter. On mouseleave the tooltip is removed again. Line breaks in the element's title will become <br> in the <div>'s contents, everything else will appear verbatim.

Call the extension via $(".someElements").myToolTip();.

Answer 5

In jQuery 1.9 (jquery + jquery-ui) and standard toolTip function use this:

$(".myClass").tooltip({
    content: function() {
        return $(this).attr('title');
    }
})

And then in the title you can use HTML's
or .

Example:

<span class="myClass" title="Line1 <br> Line 2 <br> <b>Bold</b><br>">(?)</span>

Answer 6

You can use this example:

$(document).ready(function(){

  $(function () {
    $('[data-toggle="tooltip"]').tooltip({
        container : 'body',
        html: true
    });
  });
});

After add html tag "
" inside title:

title=text1<br/>text2