Bootstrap Popover/Tooltip Click Trigger

Navigation

  1. Narration
  2. Breakdown
  3. Demo

Narration

Web development has it’s quirks. And by I mean that those of us like myself who are used to the simple and safe territory of a well defined, well documented, and most of all  consistent server-side programming language usually end up somewhere between daunted and devastated each time we subject ourselves to the tempestuous whims of front-end development. Like a peaceful Vault-dweller, each time I poke my head into the Capital Wasteland of browser-compatibility I either retreat in fear, or venture forth to discover that these badlands are just as much of a deathtrap as I believed them to be.

Unfortunately, my job requires on a daily basis for me to venture out into this dangerous wilderness and test my mettle (and much more so my patience) by working with that special trifecta of HTML, CSS, and Javascript. I also have a terrible memory, so I run into the same problems and reinvestigate them far more often than I should. So I’m making a start to writing down those problems, both for my reference and yours.

Let me begin by saying that I have a confession to make. I use Bootstrap. And I love it. I rely on it. It makes a lot of this terrible business a lot more bearable. When it goes wrong it makes me sad. Not just because I then actually have to do my own work, but because it’s like my close friend has suddenly grown a second, angrier head and has started hurling insults and rocks my way. In short, I feel betrayed.

Most recently this happened with the Twitter Bootstrap popover extension. Normally a lovely tool, I found all of a sudden it would refuse to appear when I attached it to an anchor tag and set it’s trigger event to ‘click’.

For some reason, the ‘click’ trigger maps to an event that requires the element to receive focus. Although this is just fine in Firefox (and IE!), in WebKit based browsers like Chrome and Safari certain tags cannot receive focus from the mouse if they don’t have a tabindex. Oddly enough, the anchor tag is given a place in the tab-order by default in all the browsers I’ve investigated so you can trigger onfocus events by tabbing through to the element, but not by clicking it. It took me a lot longer than it should to figure that out. If you just came here to get your popover working on click you can go home now. Just add “tabindex=’0′” to the elements that you want to have popovers or tooltips and it should work just fine. If you’re more curious about why this is, and how it works, I’ve got a couple more paragraphs for you.

The trouble is, we don’t really have a standard for this. The closest we have is the DOM Level 2 HTML specification that actually defines focus methods for only four tags; HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement and HTMLAnchorElement. What is focusable and how (by keyboard navigation or by mouse clicking) is left somewhat open ended. Because of this, different browsers have chosen to allow focus events by default on a wide variety of elements.

This puts the tabindex attribute in the position of not only dictating the tab order, but also the focusability of elements. Once you get past the now apparent misnaming of the attribute, it’s easy to use in this manner, and should resolve further problems of focus quickly and easily (at least it has for me). For quick analysis of whether this issue is the source of your difficulties I highly recommend referencing this well organized table which details browser behaviour by element in regards to focus.

Breakdown

Problem

Boostrap popovers/tooltips using ‘click’ trigger aren’t working on certain elements in Chrome and Safari.

Root Cause

Many HTML elements can’t obtain focus (in some cases this only applies to gaining focus from a mouse click! -_-) in certain browsers by default.

Solution

If the you want to be able to give the elements focus by mouse, but exclude them from the tab-order (and thereby keyboard focussing), give them a tab index of -1.

If you would like the elements to maintain their tab-order give them a tabindex of 0, and they will be able to gain focus from both mouse and keyboard.

Further Reading

  1. DOM Level 2 HTML Specification
  2. Reference table of browser behaviour
  3. A better written, more technical, and more informative look at much the same topic

0 thoughts on “Bootstrap Popover/Tooltip Click Trigger

  1. Brucefal says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    This advanced and reliable software solution enables you to take your architectural plans to a fully paperless version in no time

    Press the “Download Now” button to download PlanSwift Pro crack new.
    The whole process will just take a few moments.

    Mirror Link —> PlanSwift Pro crack for windows free download

    – Build: 10.2.1.17
    – Developer: Tech Unlimited Inc
    – Downloads: 733
    – Download type: safety (no torrent/no viruses)
    – File status: clean (as of last analysis)
    – File size: undefined
    – Price: 0
    – Special requirements: no
    – Home page: planswift.com
    – User rating:

    Tags:
    PlanSwift Pro + Crack
    PlanSwift Pro Keygen Crack
    PlanSwift Pro serial key
    PlanSwift Pro serial code
    PlanSwift Pro Serial Keys x86/x64

    Popular software:
    DraftSight crack for windows free download
    AllPlan crack only
    SmartSHOW 3D cracked full
    iMyFone iOS System Recovery Crack Latest Version
    TemplateToaster crack hack
    Антиплагиат исправить бесплатно
    Android SMS App Example – technology guide & news
    tool for downloading Google books
    F+i Marktforschung • Thema anzeigen – AppCheck Cracked Latest

  2. Brucerip says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Recover contacts, messages, call history, and pictures stored on your Android device with the help of this app that also boasts device repair tools

    Press the “Download Now” button to download FoneLab for Android crack keygen for windows.
    The whole process will just take a few moments.

    Mirror Link —> FoneLab for Android key crack

    – Version: 3.0.18
    – Company: Aiseesoft Studio
    – Downloads: 208
    – Download type: safety (no torrent/no viruses)
    – File status: clean (as of last analysis)
    – File size: undefined
    – Price: free
    – Special requirements: no
    – Home page: aiseesoft.com/fonelab-for-android
    – Rating:

    Tags:
    FoneLab for Android Full Patched
    FoneLab for Android crack and keygen free download
    FoneLab for Android Crack Patch
    FoneLab for Android keygen serial
    FoneLab for Android crack serial number

    Popular software:
    FPS Monitor Crack Latest Version
    Gihosoft TubeGet patch
    reWASD full crack
    3D LUT Creator serial key
    Interior Design 3D update crack
    Антиплагиат повышение оригинальности бесплатно
    Hello world! | MS Metamorf 2
    Google Books Downloader
    how to download video from youku.com
    Thoughts on Roth IRAs | Borrow From IRA
    ГДЗ – готовые домашние задания и решебники

  3. Brucefal says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Press the “Download Now” button to download [b]Baraha crack serial number[/b].
    The whole process will just take a few moments.

    [url=https://onyxsoftware.in/cracked?app=baraha&n=65514][img]http://i.imgur.com/qKBa3Gl.png[/img][/url]

    Mirror Link —> [url=https://onyxsoftware.in/cracked?app=baraha&n=65514][b]Baraha crack keygen for windows[/b][/url]

    Professional Indian language software that includes text editor, Unicode editor and a module that modifies your keyboard layout and allows you to translate any text in Hindi or another Indian dialect

    · Build: 10.10.178
    · Company: Baraha Software
    · Downloads: 2678
    · Download type: safety (no torrent/no viruses)
    · File status: clean (as of last analysis)
    · File size: undefined
    · Price: 0
    · Special requirements: no
    · Rating: [img]http://i.imgur.com/jNp98zs.png[/img]

    [img]https://onyxsoftware.in/shortimg?p=/content/images/screens/baraha_1.png[/img]

    [b]Keywords[/b]:
    baraha + crack latest, baraha serial code, baraha and crack, baraha crack fix, baraha crack latest version, baraha with crack, baraha update crack, baraha cracked latest, baraha full crack, baraha keygen free download

    [b]Popular software:[/b]
    [url=https://crackerpie.net/crack?i=58355&s=stellar-phoenix-word-repair]Stellar Phoenix Word Repair Crack Patch[/url]
    [url=https://crack4windows.com/crack?s=paintstorm-studio&id=39343]Paintstorm Studio Full Version With Keys Latest[/url]
    [url=https://downloadcrackz.com/program/tmpgenc-mpeg-smart-renderer/46056]TMPGEnc MPEG Smart Renderer crack exe[/url]
    [url=http://freesmartsoft.com/Home/Details/?name=FSSPlagiator&lang=ru]Антиплагиат обмануть скачать[/url]
    [url=http://www.atgcali.com/como-arreglar-un-movil-mojado/?unapproved=9621&moderation-hash=cd0f5e14fe216d8facec9561108a8f12#comment-9621]Como arreglar un movil mojado | Potenciador-Potenciador cali-vigorizante-estres-eyaculacion precoz-precoz-colageno-colageno hidrolizado-antioxidante-estrenimiento-remedios para el estrenimiento-enfermedades cardiovasculares-enfermedades del corazon-cancer de colon-sintomas de cancer de colon-dieta-como bajar de peso-dietas-articulaciones-artrosis-artritis-proteinas-suplementos-vitaminas-deseo-colageno-colageno hidrolizado-hidratacion-deshidratacion-regeneracion-nutricion-nutricion celular-bebida organica-organica-tratamiento para el cabello-caida del cabello-potenciador-vigorizante-estres-eyaculacion precoz-precoz-colageno-colageno hidrolizado-antioxidante-estrenimiento-remedios para el estrenimiento-enfermedades cardiovasculares-enfermedades del corazon-cancer de colon-sintomas de cancer de colon-dieta-como bajar de peso-dietas-articulaciones-artrosis-artritis-proteinas-suplementos-vitaminas-alta gama amor y amistad-android tablet-antioxidante-articulaciones-barato-bebida organica-caida del cabello-cancer de colon-celular-celular de teclado-celular economico-celular hyundai-celular nuevo-celular tablet-colageno-colageno hidrolizado-convencional-cumpleanos-deseo-deshidratacion-enfermedades del corazon-estres-eyaculacion precoz-hidratacion-nokia sencillo-nutricion-nutricion celular-organica-potenciador-precoz-regeneracion-sencillo-sintomas de cancer de colon-smartphone-tablet-tratamiento para el cabello-vigorizante-vitaminas[/url]
    [url=https://gamercheatscode.com/patch/age+of+mythology/134]Download Age of Mythology Crack[/url]
    [url=http://everydaysoft.com/Product/EDSGoogleBooksDownloader/?lang=en]Google Books Downloader[/url]
    [url=https://video-box.org]dailymotion video downloader[/url]
    [url=http://okkkkkkkkkkkkkkkk.blog86.fc2.com/blog-entry-10.html]G-Boys ZYAKUMU MOVIE2[/url]
    [url=https://mygdz.net]ГДЗ и решебники для всех классов онлайн[/url]
    [url=https://www.pinterest.com/downloadwithcrack/software-cracks-keygens/]Software Cracks Keygens[/url]
    [url=https://dllerrorsfixed.com/fix/api-ms-win-core-registry-l1-1-0.dll/1446]Repair missing or corrupt api-ms-win-core-registry-l1-1-0.dll[/url]

  4. Brucefal says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Press the “Download Now” button to download [b]MedCalc Keygen Crack[/b].
    The whole process will just take a few moments.

    [url=https://serialcrack.org/serial/85958/medcalc.html][img]http://i.imgur.com/PrgdxKb.png[/img][/url]

    Mirror Link —> [url=https://serialcrack.org/serial/85958/medcalc.html][b]MedCalc crack files[/b][/url]

    Statistical software for biomedical research with a rich set of functions, graph types and an advanced module for performing ROC graph analysis

    · Version: 19.0.2
    · Developer: MedCalc Software
    · Downloads: 751
    · Download type: safety (no torrent/no viruses)
    · Status file: clean (as of last analysis)
    · File size: undefined
    · Price: free
    · Special requirements: no
    · User rating: [img]http://cdn1.valuationtechnology.com/wp-content/uploads/2018/08/03105541/stars.png[/img]

    [img]https://serialcrack.org/site/images/preview/medcalc_1.png[/img]

    [b]Keywords[/b]:
    medcalc keygen crack, medcalc + crack latest, medcalc crack keygen serial, medcalc full crack latest, medcalc crack latest, medcalc crack and keygen free download, medcalc crack patch, medcalc license crack, medcalc license, medcalc serial keys x86/x64

    [b]It may be interesting:[/b]
    [url=https://crackdownloadz.com/app/bitwar-data-recovery/104956]Bitwar Data Recovery Keygen Serial[/url]
    [url=https://crack4windows.com/crack?s=obd-auto-doctor&id=64555]OBD Auto Doctor serial code[/url]
    [url=https://crackdownloadz.com/app/droid-transfer/31049]Droid Transfer cracked[/url]
    [url=http://freesmartsoft.com/Home/Details/?name=FSSPlagiator&lang=ru]уникальность текста программа скачать[/url]
    [url=https://blog.letote.com/2016/04/04/behind-the-tote-amy-ard/?unapproved=19859&moderation-hash=9707320aabcc870d5a405d590c268969#comment-19859]Talking Finances with Le Tote CFO, Amy Ard – The Le Tote Blog[/url]
    [url=https://gamercheatscode.com/patch/vanquish/1445]Download Vanquish Keygen Serial[/url]
    [url=http://everydaysoft.com/Product/EDSGoogleBooksDownloader/?lang=en]download google books[/url]
    [url=https://video-box.org]download video from pornhub[/url]
    [url=https://www.minivap.com/how-to-connect-the-mv-charger-and-battery/?unapproved=426&moderation-hash=6af2818ff57ec2a73b6de1c6659f2c1d#comment-426]How to connect the MV Charger and Battery – MiniVap[/url]
    [url=https://mygdz.net]Готовые Домашние задания 1-11 класс онлайн[/url]
    [url=https://www.pinterest.com/downloadwithcrack/windows-software-cracks/]Windows Software Cracks[/url]
    [url=https://dllerrorsfixed.com/fix/td_ge_3.08_10.dll/23634]Repair missing or corrupt td_ge_3.08_10.dll[/url]

  5. Brucefal says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Push the “Download Now” button to download [b]Netcam Studio crack serial number[/b].
    The whole process will just take a few moments.

    [url=https://downloadcrackfree.com/crack?s=netcam-studio&id=15377][img]http://i.imgur.com/qOcN08a.png[/img][/url]

    Monitor your home or office with multiple web cameras, as well as record the stream at predefined intervals, thanks to this complex application

    MIRROR LINK —> [url=https://downloadcrackfree.com/crack?s=netcam-studio&id=15377]https://downloadcrackfree.com/crack?s=netcam-studio&id=15377[/url]

    · Release version: 1.7.2.0
    · Release date: March 19th 2019
    · Developer: Moonware Studios
    · Downloads: 2978
    · Download type: safety (no torrent/no viruses)
    · Status: clean (as of last analysis)
    · File size: unknown
    · Price: 0
    · Special requirements: no
    · Systems: Win 10 64 bit / Win 10 / Win Server 2012 / Win 2008 64 bit / Win 2008 / Win 2003 / Win 8 64 bit / Win 8 / Win 7 64 bit / Win 7 / Win Vista 64 bit / Win Vista / Win XP 64 bit / Win XP
    · User rating: [img]http://i.imgur.com/jNp98zs.png[/img]

    [img]https://downloadcrackfree.com/thumbnail?path=/content/images/screens/netcam-studio_1.png[/img]

    [b]Tags[/b]:
    netcam studio crack windows, netcam studio and crack, netcam studio license crack, netcam studio crack keygen serial, netcam studio crack for windows free download, netcam studio cracked, netcam studio cracked, netcam studio key crack, netcam studio + crack latest, netcam studio crack fix

    [b]More cracks:[/b] [url=https://downloadcrackfree.com]here[/url]

  6. Brucefal says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Push the “Download Now” button to download TalkHelper Call Recorder for Skype Keygen Serial.
    It will just take a few seconds.

    Record all calls you make to Skype friends or you receive from them, and keep track of both voice and video messages with this application

    Mirror —> https://serialcrackkeygen.com/cracked/talkhelper-call-recorder-for-skype-55245

    · Release version: 5.30
    · Build date: May 17 2019
    · Company: TalkHelper Inc.
    · Downloads: 1976
    · Download type: safety (no torrent/no viruses)
    · File status: clean (as of last analysis)
    · File size: small
    · Price: free
    · Special requirements: no requirements
    · Systems: Win 10 64 bit / Win 10 / Win 8 64 bit / Win 8 / Win 7 64 bit / Win 7 / Win Vista 64 bit / Win Vista
    · User rating:

    Tags cloud:
    talkhelper call recorder for skype + crack latest, talkhelper call recorder for skype crack keygen for windows, talkhelper call recorder for skype crack serial, talkhelper call recorder for skype crack files, talkhelper call recorder for skype crack, talkhelper call recorder for skype crack new, talkhelper call recorder for skype keygen serial, talkhelper call recorder for skype license code, talkhelper call recorder for skype with crack, talkhelper call recorder for skype crack keygen for windows

    More keygens: here

    It may be interesting:
    ?????????  ??! | ?????
    повысить процент уникальности текста
    Nsangu article – Blik op Afrika FR – Road to Cape Town
    Download ARMED SEVEN license code
    Kick Rugby Usa – Bridging the art of kicking
    Convert Google books to PDF, PNG or JPG
    Beautiful Morning… –
    готовые домашние задания и решебники
    Repair missing or corrupt anselsdk64.dll

  7. Brucefal says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Press the “Download Now” button to download DMDE crack version.
    The whole process will just take a few seconds.

    Put any physical device, logical drive or disk image under the scope with the possibility to access binary data and attempt to recover lost or removed files

    Mirror —> DMDE + Crack Latest

    · Release version: 3.6.0.770
    · Build date: September 3 2019
    · Developer: Dmitry Sidorov
    · Downloads: 1551
    · Download type: safety (no torrent/no viruses)
    · File status: clean (as of last analysis)
    · File size: unknown
    · Price: 0
    · Special requirements: no
    · Systems: Windows All
    · Rating:

    Keywords:
    dmde full version serial keys latest, dmde cracked full, dmde crack files, dmde full crack, dmde crack patch, dmde with license key latest, dmde full version with keys latest, dmde crack, dmde crack, dmde crack install

    More software keygens: this way

    Popular software:
    Dalmatian American Club – Dalmatian American Club
    Антиплагиат как пройти
    Chic eyeware for fall – SeeinFashion
    Download Tarr Chronicles serial number
    Michel Heerkens Fotografie » 20160330-MCH-070-750
    Turning Off Windows Defender
    Скачать CBS Video Downloader crack и keygen
    Repair missing or corrupt adlmint.dll
    Students’ Learning Journal – Summer App Space

Leave a Reply

Your email address will not be published. Required fields are marked *