A Lightweight Responsive jQuery Tooltip Plugin

Overview

tipso

A Lightweight Responsive jQuery Tooltip Plugin

Build Status NPM version Bower version Gittip

There is also a Wordpress version of this plugin. Get it here

Getting started

  1. Include jQuery

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    Requires jQuery 1.7+

  2. Include plugin's code

    <link rel="stylesheet" href="/path/to/tipso.css">
    <script src="/path/to/tipso.js"></script>

To use css3 animation effects please include Animate.css

```html
<link rel="stylesheet" href="/path/to/animate.css">	
```
  1. Call the plugin

    $('.tipso').tipso();

##Usage

Name Default Description
speed 400 integer - Duration of the fade effect in ms
size '' Tipso Bubble size classes (string: 'tiny', 'small', 'default', 'large') or you can make your own classes
background '#55b555' Background color of the tooltip, it can be hex, rgb, rgba, color name
titleBackground '#333333' Background color of the tooltip title, it can be hex, rgb, rgba, color name
color '#ffffff' Text color of the tooltip, it can be hex, rgb, rgba, color name
titleColor '#ffffff' Text color of the tooltip title, it can be hex, rgb, rgba, color name
titleContent '' The content of the tooltip title, can be text, html or whatever you want
showArrow true Ability to show/hide the arrow of the tooltip (true, false)
position 'top' Initial position of the tooltip, available positions 'top', 'bottom', 'left', 'right'
width 200 Width of the tooltip in px or % (for % add the value in quotes ex.'50%')
maxWidth '' max-width of the tooltip in px or % (for % add the value in quotes ex.'50%'). For usage you need to set width to '', false or null
delay 200 Delay before showing the tooltip in ms
hideDelay 0 Delay before hiding the tooltip in ms
animationIn '' CSS3 animation effect to show the tooltip using Animate.css
animationOut '' CSS3 animation effect to hide the tooltip using Animate.css
offsetX 0 Offset value of the tooltip on X axis
offsetY 0 Offset value of the tooltip on Y axis
tooltipHover false Abillity to interact with the tooltip content
content null The content of the tooltip, can be text, html or whatever you want
ajaxContentUrl null Url for Ajax content
ajaxContentBuffer 0 Buffer timer for Ajax content
contentElementId null Normally used for picking template scripts
useTitle false To use the default title attribute as content (true, false)
templateEngineFunc null A function that compiles and renders the content
onBeforeShow function(){} Function to be executed before tipso is shown
onShow function(){} Function to be executed after tipso is shown
onHide function(){} Function to be executed after tipso is hidden

Additionaly you can use data-tipso instead of the title attribute for the tooltip content ( set useTitle: false )

You can set all the options via data-tipso attribute. For example if you want to change the background you will add data-tipso-background="#555555" to the element.

API

	// Show the tipso tooltip
	$('.tipso').tipso('show');

	// Hide the tipso tooltip
	$('.tipso').tipso('hide');

	// Hide/Close the tipso tooltip from inside the tooltip 
	// and/or without hideDelay timeout
	$('.tipso').tipso('close');
	// or as alternative
	$('.tipso').tipso('hide', true);

	// Destroy tipso tooltip
	$('.tipso').tipso('destroy');
	
	// Add a callback before tipso is shown
	$('.tipso').tipso({
		onBeforeShow: function ($element, element) {
			// Your code
		}
	});

	// Add a callback when tipso is shown
	$('.tipso').tipso({
		onShow: function ($element, element) {
			// Your code
		}
	});

	// Add a callback when tipso is hidden
	$('.tipso').tipso({
		onHide: function ($element, element) {
			// Your code
		}
	});

	// Load AJAX content to tipso
	$('.tipso').tipso({	
		useTitle: false,
		ajaxContentUrl : 'ajax.html'
	});

	// Update tipso options
	$('.tipso').tipso('update', 'content', 'new content');

Demo

Here is the link to the demo

Bugs

For bug reports, questions, feature requests, or other suggestions please create an issue on GitHub.

Author

twitter/BojanPetkovski
Bojan Petkovski

Contributors

auxiliary

License

tipso is licensed under the MIT License

Comments
  • onmouseover

    onmouseover

    Hello, this is my code:

    $(document).ready(function(){
        $("div.ajax" ).on( "mouseover", function() {
            $(this).tipso({
                background: null,
                useTitle: false,
                ajaxContentUrl : 'myfile.php?var='+$(this).data("id")
            });
        });
    }); 
    

    it works but why the tooltip is showed only the second time the mouse is over the div element (with class = ajax)? Sorry, I'm newbe with jquery...

    Thank a lot

    opened by marcojalongo 12
  • Suggestion improvement

    Suggestion improvement

    Hi,

    I am back :) .

    On your demo site, i have seen this code (and for personal use, I find that it would be better ... )

    if(jQuery(this).hasClass('clicked')){
        jQuery(this).removeClass('clicked');
        jQuery('.beforeShow').tipso('hide');
      } else {
        jQuery(this).addClass('clicked');
        jQuery('.beforeShow').tipso('show');
      }
    

    I think that would be a good idea if you will implement a "toggle" method which hide if the tooltip tipso is currently displayed and conversely. Instead of to use adding/remove CSS class like you do currently...

    Why not, moreover, two public method "isHide()" and "isShow()" which return true or false... ?

    To sum up, the code will be, simply :

        $('.beforeShow').tipso('toggle');
    

    best regards.

    opened by usb248 6
  • tooltip close button

    tooltip close button

    Hi Bojan! I try to make close button inside tooltip and using .tipso('hide') but no success. Can you please take a look below and advise what i'm doing wrong. This is a screenshot for clarifying http://joxi.ru/4AkZRd0sPbge2q

    // tipso init
    $('.thumbnail').tipso({
      tooltipHover: true,
      ....
    });
    // .btn-close handler 
    $('body').on('click', '.btn-close', function() {
      $('.thumbnail').tipso('hide');
    });
    
    enhancement 
    opened by x35a 4
  • Template engine support and title bars

    Template engine support and title bars

    Hey,

    Great work with the plugin. I've made a fork (https://github.com/auxiliary/tipso) and added template engine support and title bars and some other changes for my own needs. If you see any of it needed, let me know and I'll make an individual pull request on the feature. The demo page in the fork has some extra examples for the changes.

    opened by auxiliary 4
  • (Question) Unclear $.fn initiation

    (Question) Unclear $.fn initiation

    Hi Bojan,

    Nice plugin you build! I was searching for a good example of the pattern you are using and so I found Tipso.

    But this line is not clear for me: ~~https://github.com/object505/tipso/blob/master/src/tipso.js#L504~~ (line number changes)

    What is the meaning of the following?

    if (!(this instanceof $)) {
        $.extend(defaults, options);
    }
    
    opened by ametad 4
  • Animation tooltip

    Animation tooltip

    Hello, your plugin is very useful but i think that it will be nicest if we can choice other animation (why not use CSS3 animation ... for this moment only fade effect). Many plugin work with several choice of animation in CSS3 and if browser doesn't support CSS3 animation, use alternative jquery method. So, my question is, have you planned to do this development ?

    (I'm french, sorry for my bad english :S)

    opened by usb248 4
  • Horizontal Scroll Splits Tip from Text & Arrow

    Horizontal Scroll Splits Tip from Text & Arrow

    When there is horizontal scroll on the page, and the tip is off the page, the tip does not display next to the text and arrow.

    tooltip_split

    Fiddle: http://jsfiddle.net/2agt9vqx/

    opened by gerrypower 4
  • ajaxContentUrl does not load content

    ajaxContentUrl does not load content

    Hello, I created content.php and in it I use full URL like http://www.domain.com in the ajaxContentUrl But the tooltip with ajax content html page with image does not show if I access the page with the

    <?php readfile("http://www.domain.com/content.php"); ?>

    I get no error in the network tab in dev inspector, but the image file is never loaded and shown. If i load same page direct in browser everything works fine. Only the readfile method does not work.

    I need a way to load the tipso from my remote site.

    opened by akierum 3
  • Wrong left and top offset ipad mini 2

    Wrong left and top offset ipad mini 2

    On ipad mini 2 we have an error where the left and top offset are completely wrong: left: -423112px; top: 1871px;

    Is this a known issue, or is there a fix for this?

    All goed well on ipad mini 3.

    opened by R3dRidle 3
  • package.json

    package.json "main" should just be JS entry point

    The main field in package.json is set up to be an array. However, this should just be the JavaScript file so that tools like Browserify can know the module's entry point.

    It should probably be just src/tipso.min.js. I'm happy to send a PR if you agree.

    opened by isaacs 3
  • Ignore mouseover/mouseout?

    Ignore mouseover/mouseout?

    Is there a way to show a tooltip "always", until I manually close it? What I mean is, in this case, I don't want the tooltip to show/hide when I hover the connecting element.

    opened by remisture 2
  • Need Help with Bojan Petkovski's jQuery tooltip plugin named “Tipso

    Need Help with Bojan Petkovski's jQuery tooltip plugin named “Tipso"

    Before I begin to modify Bojan Petkovski's lightweight jQuery tooltip plugin named “Tipso," I'd like to know if there's a way to: (a) fix a platform-specific bug in his plugin or (b) connect with Bojan to inquire about a fix or workaround for the bug. (My Google-search efforts don't connect with him.)

    Currently, his Tipso tooltip plugin works extremely well on my Samsung Galaxy Note 10 smartphone. No problem using it on these browsers: Chrome, Samsung Internet, and Firefox.

    However, Tipso does NOT work on Apple iPhones! The Tipso popup balloon doesn't disappear when I tap elsewhere on the screen or when I move the cursor away from the tooltip trigger. I MUST close the page to collapse the balloon and view the page's remaining contents.

    Does anyone know if there's a fix for this failure to activate Tipso properly on iPhones? I hope there is.

    Thanks, in advance.

    opened by warrenCservant 0
  • On scroll after tipso tooltips position change, it never shown on its preferred  position.

    On scroll after tipso tooltips position change, it never shown on its preferred position.

    Hi @object505 ! Your Tipso tooltip is an excellent plugins. But now I'm facing a problem. may be its a bug in your script. On scroll when the preferred position of the tooltip changed , it's never come back to its preferred position again. I've tried on many browser same problem. Would you please check the issue.

    Thanks.

    opened by tsabedin 0
  • Title Bars Hide if Undefined

    Title Bars Hide if Undefined

    Fixed Title bar showing regardless of whether Title is specified

    At the moment (for me anyway), if titleContent: isn't specified, it still shows the div <div class="tipso_title"></div> HTML on the tooltip, and with padding can make the tooltip look odd and top-heavy.

    This now hides it if the titleContent is undefined.

    opened by arctic-ice-cool 0
  • How to set a different border-color for the tool-tip?

    How to set a different border-color for the tool-tip?

    Hi, Thanks for this wonderful and easy to use tool-tip. While trying out this tool, I tried to set a different border-color for the tool-tip. I added the tool-tip to the bottom. And, I could able to apply a different border-color for the rectangle box only. And, I am unable to set the border for the triangle that shows as the edge of the tool-tip. .tipso_bubble.bottom { border: 1px solid #000000; }

    Is there any setting available to configure the border-color for the tool-tip?

    Thanks for your help.

    opened by smyogesh 0
  • maxWidth parameter doesn't work

    maxWidth parameter doesn't work

    The maxWidth parameter incorrectly sets the CSS value maxWidth, which is an invalid property.

    maxWidth : max-width of the tooltip in px or % (for % add the value in quotes ex.'50%'). For usage you need to set width to '', false or null

    Line 195 of the JS sets the CSS from the passed or default parameter: maxWidth: obj.settings.maxWidth

    But it needs to be max-width CSS property, so therefore doesn't currently work.

    opened by peteralewis 0
  • Tooltip tipso doesn't hide

    Tooltip tipso doesn't hide

    Hi, Bojan! I have a some problem with plugin.

    I set the option - tooltipHover: false, But tooltip doesn't fadeOut.

    You can see at my jsBin - http://jsbin.com/hewabaq/edit?html,css,js,output

    Code:

    $('[data-tipso]').tipso({
        background: '#ffffff',
        color: '#b7b7b7',
        animationIn: 'fadeInDown',
        animationOut: 'fadeInOut',
        useTitle: false,
        size: 'small',
        tooltipHover: false,
    });
    

    How i can fix it bug?

    opened by lime7 0
Releases(v1.0.8)
  • v1.0.8(Nov 10, 2015)

  • v1.0.7(Oct 30, 2015)

    • Fixed resize event not being removed on mouseout
    • Mobile touch issue when closing Tipso tooltip
    • Added option hideDelay, delay before hiding Tipso tooltip in ms
    Source code(tar.gz)
    Source code(zip)
  • v1.0.6(Sep 13, 2015)

    • Template engine support added
    • Corner positions support added
    • Title bar added
    • Size option added (similar to Foundation's syntax)
    • Events send the element for easier updating
    • Show/Hide arrow option added
    • All settings are accessible from data-tipso-
    • The data-tipso attribute itself can be used for settings as well as the content
    • Large tooltips with right/left positions also reposition if they don't fit

    Big Thanks goes to auxiliary for contributing :+1:

    Source code(tar.gz)
    Source code(zip)
  • v1.0.5(May 9, 2015)

    • Added Tooltip Hover / Interaction ability ( new option - tooltipHover )
    • Added max-width of the tooltip (new option - maxWidth )
    • Fixed bug when updating position
    Source code(tar.gz)
    Source code(zip)
  • v1.0.4(Feb 25, 2015)

  • v1.0.2(Feb 15, 2015)

  • v1.0.1(Dec 24, 2014)

    • Added onBeforeShow option, a function to be executed before the tooltip is shown
    • Added ajaxContentUrl option, an option to load tooltip content via AJAX

    Big Thanks goes to exlame for contributing :+1:

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Dec 3, 2014)

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

fancyBox jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. See the project page for doc

Jānis Skarnelis 7.2k Jan 2, 2023
A customizable, modular, responsive, lightbox gallery plugin.

lightGallery A customizable, modular, responsive, lightbox gallery plugin for jQuery. Demo JQuery lightGallery demo. Codepen demo Main features Fully

Sachin N 5.6k Jan 4, 2023
Light and responsive lightbox script with focus on performance.

Magnific Popup Repository Fast, light and responsive lightbox plugin, for jQuery and Zepto.js. Documentation and getting started guide. Examples and p

Dmitry Semenov 11.3k Jan 2, 2023
Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

Note: Since this plugin was created to solve a lot of the issues with BS2, it still uses the BS2 markup syntax. Currently I believe the default BS3 mo

Jordan Schroter 5k Dec 28, 2022
Avgrund is jQuery plugin with new modal concept for popups

Avgrund Avgrund is a jQuery plugin for your modal boxes and popups. It uses new concept showing depth between popup and page. It works in all modern b

Dmitri Voronianski 1.8k Dec 14, 2022
A light-weight, customizable lightbox plugin for jQuery

About Colorbox: A customizable lightbox plugin for jQuery. See the project page for documentation and a demonstration, and the FAQ for solutions and e

Jack Moore 4.8k Dec 29, 2022
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.

jBox jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more. Demo: https://stephanwagner.

Stephan Wagner 1.4k Dec 15, 2022
A simple vanilla and lightweight modal which is easy to expand

A simple vanilla and lightweight modal which is easy to expand

null 1 Jul 3, 2022
Bootstrap-Lightbox - Simple & lightweight lightbox for Bootstrap 5

Bootstrap-Lightbox Simple & lightweight lightbox for Bootstrap 5 Basic Usage Adding data-modal="bs-lightbox" in your A href tag. <a data-modal="bs-lig

null 1 Oct 11, 2022
jQuery PopBox UI Element

jQuery PopBox jQuery PopBox is a simple balloon UI element inspired by 37Signals Highrise CRM. See it in action here: http://gristmill.github.com/jque

Gristmill 427 Sep 24, 2022
A touchable jQuery lightbox

Swipebox A touchable jQuery lightbox. View project page What is Swipebox ? Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. Feat

null 2k Dec 6, 2022
The simplest possible modal for jQuery

A simple & lightweight method of displaying modal windows with jQuery. For quick examples and demos, head to jquerymodal.com. Why another modal plugin

Kyle Fox 2.5k Dec 29, 2022
A jQuery tooltip plugin

Tooltipster A flexible and extensible jQuery plugin for modern tooltips by Caleb Jacob and Louis Ameline under MIT license. Compatible with Mozilla Fi

Caleb Jacob 2.8k Dec 29, 2022
A tooltip style toolbar jQuery plugin

Toolbar.js A jQuery plugin that creates tooltip style toolbars. Update Toolbar.js has been overhauled with new functionality, a completely new design

Paul Kinzett 2.3k Dec 18, 2022
Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Jelle Kralt 537 Dec 8, 2022
A lightweight tooltip plug-in library

popper-next 是一款轻量的 Tooltip 插件 vue、react安装使用 推荐yarn yarn add popper-next 或者 cnpm install popper-next -S 在html页面中如何使用 <script src="https://unpkg.com/pop

east-wzd 4 Dec 7, 2022
Elegant, responsive, flexible and lightweight modal plugin with jQuery.

iziModal Elegant, responsive, flexible and lightweight modal plugin with jQuery. izimodal.marcelodolza.com Fast Responsive Animated Lightweight Custom

Marcelo Dolza 2.1k Dec 30, 2022
Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.

Samson Onna 600 Dec 8, 2022
Simple, responsive and lightweight Masonry Grid jQuery Plugin.

jquery-masonry-grid Simple, responsive and lightweight Masonry Grid jQuery Plugin. Installation Add the script before closing the <body> tag (make sur

Peter Breitzler 8 Jun 9, 2022
The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

pickadate The mobile-friendly, responsive, and lightweight jQuery date & time input picker. To get started, check out the: Homepage - Date picker - Ti

null 7.7k Jan 3, 2023