2

I'm using Bootstrap Popovers to supply "help text" in my UI.

My existing JavaScript:

// add "tooltips" via popover
$('[data-toggle="popover"]').popover({
    container: 'body',
    trigger: 'hover',
    placement: 'auto bottom'
});

The Popover displays when I hover with a mouse or touch the element. My problem is with anchor tag elements. If the Popover is triggered by a touch event:

  1. Don't follow the link
  2. Add an anchor tag element to the Popover text to give access to the underlying link
isherwood
  • 58,414
  • 16
  • 114
  • 157
Sonny
  • 8,204
  • 7
  • 63
  • 134
  • [Possible duplicate](http://stackoverflow.com/questions/15690781/twitter-bootstrap-popover-trigger-for-desktop-and-mobile-platforms) – ODelibalta Jul 02 '15 at 15:25
  • Thanks, but that's a different issue. I'll try to clarify the OP. – Sonny Jul 02 '15 at 15:27

2 Answers2

1

I'd detect whether the user is on a touch device, then serve different content from data attributes. Use Popover methods to trigger your various actions.

<a href="#" 
  data-href="http://jsfiddle.net" 
  data-toggle="popover" 
  title="A popover title" 
  data-hover-content="No link here." 
  data-touch-content="<a href='http://jsfiddle.net'>
    A link here</a>.">A popover link
</a>

var is_touch_device = 'ontouchstart' in document.documentElement;

$('[data-toggle="popover"]').popover({
    container: 'body',
    trigger: 'manual',
    placement: 'auto bottom',
    html: true,
    content: function () {
        if (is_touch_device) {
            return $(this).attr('data-touch-content');
        } else {
            return $(this).attr('data-hover-content');
        }
    }
})
.on('mouseenter touch', function (e) {
    $(this).popover('show');
})
.on('mouseleave', function () {
    $(this).popover('hide');
})
.on('click', function () {
    if (!is_touch_device) {
        window.location.href = $(this).attr('data-href');
    }
});

Fiddle demo

This can probably be simplified a bit. You could specify your content in the content function instead, of course.

isherwood
  • 58,414
  • 16
  • 114
  • 157
  • I like your method for serving up two different messages, but your solution doesn't seem to prevent the link from being followed on a mobile device. – Sonny Jul 02 '15 at 16:16
0

this might help:

event.preventDefault()

"Description: If this method is called, the default action of the event will not be triggered... For example, clicked anchors will not take the browser to a new URL..."

Dr Upvote
  • 8,023
  • 24
  • 91
  • 204