Question

I would like to highlight the text within a tooltip when the user clicks the Short Url anchor so he can copy paste it. The tooltip is served by Twitter Bootstrap and the markup looks like this:

<div class="shorturl">
    <a href="#" rel="tooltip_r" data-original-title="http://tmblr.co/ZPPojuQzc9bb">Short URI</a>
</div>

I found this snippet which I think would work just right except that I have not yet figured out how to handle the clicking of the link (which both does not scroll and highlights the text within the tooltip).

function selectText() {
    if (document.selection) {
    var range = document.body.createTextRange();
        range.moveToElementText(document.getElementByClass('tooltip'));
    range.select();
    }
    else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.getElementByClass('tooltip'));
    window.getSelection().addRange(range);
    }
}

How can I make this work? Input very much appreciated!

Answer 1

This is what I would suggest to you : Live demo (jsfiddle)

var selector = '[rel="tooltip_r"]';  // Links that will have the feature
var tooltipOptions = {               // Some options for the tooltips (careful if you override the "defaults" set below)
    placement: 'right'
};
var attribute = 'data-url';          // Attribute where to find the url, could be href

/* Be sure of what you are doing if you modify below this */
$elts = $(selector);
var defaultOptions = {
        trigger: 'manual',
        title: '<input type="text" readonly="readonly"/>'
};
var opts = $.extend({}, defaultOptions, tooltipOptions);

$elts.each(function() {
    var $this = $(this);
    var url = $this.attr(attribute);
    $this.tooltip(opts);
    $this.on('click.tooltip',function(e) {
        $this.tooltip('show');
        $this.data('tooltip').$tip.find('input').val(url).select()
            .on('click', function(e){ e.stopPropagation(); });
        e.preventDefault();
        e.stopPropagation();
    });
});

$('html').on('click.tooltip', function() {
    $elts.tooltip('hide');
});

And you might use some styles to improve the input in the tooltip. For example :

.tooltip .tooltip-inner > input[type="text"] {
    background: transparent;
    border: none;
    max-width: 100%;
    width: auto;
    padding: 0;
    color: inherit;
}

Update

If you need the same feature in dynamically loaded content, delegated events need to be used. Here is a working jsfiddle.

var selector = '[rel="tooltip_r"]';  // Links that will have the feature
var tooltipOptions = {               // Some options for the tooltips (careful if you override the "defaults" set below)
    placement: 'right'
};
var attribute = 'data-url';          // Attribute where to find the url, could be href    
var onClass = 'on';                  // Class used to determine which tooltips are displayed

/* Be sure of what you are doing if you modify below this */
var defaultOptions = {
        trigger: 'manual',
        title: '<input type="text" readonly="readonly"/>'
};
var opts = $.extend({}, defaultOptions, tooltipOptions);
var selectorOn = selector+'.'+onClass;

$('body').on('click.tooltip', selector, function(e) {
    var $this = $(this);
    var url = $this.attr(attribute);
    $this.data('tooltip') || $this.tooltip(opts);
    $this.tooltip('show').addClass(onClass);
    $this.data('tooltip').$tip.find('input').val(url).select()
        .on('click', function(e){ e.stopPropagation(); });
    e.preventDefault();
    e.stopPropagation();
})
  .on('click.tooltip', function() {
    var $elts = $(selectorOn);
    $elts.tooltip('hide');
});