add template option and make title an optional attribute for popover

This commit is contained in:
Jacob Thornton 2011-10-29 19:59:51 -07:00
parent 640fd15464
commit 169b4b5dcb
3 changed files with 29 additions and 5 deletions

View File

@ -553,6 +553,12 @@ $('#.tabs').bind('change', function (e) {
<td>'hover'</td>
<td>how tooltip is triggered - hover | focus | manual</td>
</tr>
<tr>
<td>template</td>
<td>string</td>
<td>[default markup]</td>
<td>The html template used for rendering a twipsy.</td>
</tr>
</tbody>
</table>
<p><span class="label notice">Notice</span> Individual twipsy instance options can alternatively be specified through the use of data attributes.</code></p>
@ -679,6 +685,12 @@ $('#.tabs').bind('change', function (e) {
<td>'hover'</td>
<td>how tooltip is triggered - hover | focus | manual</td>
</tr>
<tr>
<td>template</td>
<td>string</td>
<td>[default markup]</td>
<td>The html template used for rendering a popover.</td>
</tr>
</tbody>
</table>
<p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p>
@ -693,7 +705,7 @@ $('#.tabs').bind('change', function (e) {
<p>Hides an elements popover.</p>
<pre class="prettyprint linenums">$('#element').popover('hide')</pre>
<h3>Demo</h3>
<a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
<a href="#" class="btn danger" rel="popover" title="A title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
<script>
$(function () {
$("a[rel=popover]")

View File

@ -41,6 +41,10 @@
$tip[0].className = 'popover'
}
, hasContent: function () {
return this.getTitle() || this.getContent()
}
, getContent: function () {
var content
, $e = this.$element
@ -57,7 +61,7 @@
, tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="popover" />')
.html('<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>')
.html(this.options.template)
}
return this.$tip
}
@ -74,6 +78,9 @@
return this
}
$.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { placement: 'right'})
$.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, {
placement: 'right'
, template: '<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>'
})
}( window.jQuery || window.ender );

View File

@ -72,7 +72,7 @@
, $tip
, tp
if (this.getTitle() && this.enabled) {
if (this.hasContent() && this.enabled) {
$tip = this.tip()
this.setContent()
@ -145,6 +145,10 @@
}
}
, hasContent: function () {
return this.getTitle()
}
, getTitle: function() {
var title
, $e = this.$element
@ -165,7 +169,7 @@
, tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="twipsy" />').html('<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>')
this.$tip = $('<div class="twipsy" />').html(this.options.template)
}
return this.$tip
}
@ -296,6 +300,7 @@
, offset: 0
, title: 'title'
, trigger: 'hover'
, template: '<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>'
}
$.fn.twipsy.elementOptions = function(ele, options) {