Tooltip

Tooltip jQuery plugin. Demo as per this site.


Options

  • attr: (string) the attribute of the element to use as content for the tooltip.
    default – ‘title’
  • type: (string) ‘cursor’ – tooltip is fixed to cursor movement, ‘fixed’ – tooltip is fixed to top of element, ‘browser_emulate’ – emulates typical browser title attribute behaviour.
    default – ‘cursor’
  • delay: (int) time in milliseconds, 1000 milliseconds = 1 second.
    default – 650
  • tipAttributes: (object) attributes for the tooltip.
    default – {class: ‘ml-tooltip’}
  • contentBefore: (string) content to include before the attribute content. Use for icons/images etc. Can be html.
    default – ”
  • disableTouch: (bool) disable tooltip on touchscreen devices. If set to false the tooltip will display after the delay time has been reached and is hidden on touchend. Clicks will fire if touch finishes before the delay time is reached. Set to true for the default browser behaviour.
    default – true
  • styles: (object) object with styles to apply to the tooltip.
    default – {background: ‘#000’, color: ‘#fff’, fontSize: ’14px’, padding: ‘2px 8px’, borderRadius: ‘3px’}
  • onTooltipShow: (method) do something when tooltip is showing.
    default – {}
  • onTooltipClose: (method) do something when tooltip has closed.
    default – {}
  • onBeforeAppend: (method) do something just before appending the tooltip to the DOM.
    default – {}

Tooltips on this page

Target the main thumbnail image and the download button in the main body of the page. Both elements have the ‘title’ attribute.

	
    $('#primary .thumbnail, input#download_tooltip').tooltip({
		type: 'cursor',
		delay: 650,
		tipAttributes: {
			class: 'ml-tooltip primary'
		},
		styles: {
			background: '#f12121',
			color: '#fff',
			padding: '2px 7px',
			fontSize: '14px',
			boxShadow: '0px 2px 8px -3px #999', 
			borderRadius: '3px'
		}
	});

Target all social icon anchor tags with the title attribute.

    $('ul#oa_custom_shares li a').tooltip({
		type: 'fixed',
		delay: 700,
		attr: 'title',
		tipAttributes: {
			class: 'social'
		},
		styles: {
			background: '#fff',
			color: '#f12121',
			border: '5px solid #000',
			padding: '3px 8px',
			fontSize: '25px',
			fontFamily: 'monospace',
			fontWeight: 600,
			boxShadow: '0px 2px 8px -3px #999',
			textShadow: '2px 2px 0px #000',
			borderRadius: '3px'
		}
	});

Target all anchor tags in the main menu with the ‘title’ attribute.

	
	$('div#artemis_left_nav a[title], div#artemis-menu [title]').tooltip({
		type: 'browser_emulate',
		delay: 650,
		disableTouch: false,
		tipAttributes: {
			class: 'ml-tooltip secondary'
		},
		styles: {
			background: '#f12121',
			color: '#fff',
			padding: '2px 7px',
			fontSize: '14px',
			boxShadow: '0px 2px 8px -3px #999', 
			borderRadius: '3px'
		}
	});

Target the elements with class ‘options-title’ which have the ‘data-title’ attribute (options above highlighted in bold).

	
	$('.options-title').tooltip({
		type: 'fixed',
		delay: 300,
		attr: 'data-title',
		tipAttributes: {
			class: 'ml-tooltip tertiary'
		},
		disableTouch: false,
		styles: {
			background: '#bfffd6',
			color: '#000',
			border: '3px solid #000',
			padding: '2px 7px',
			fontSize: '15px',
			fontWeight: 600,
			boxShadow: '0px 2px 8px -3px #999',
			textShadow: '0px 1px 0px #9ee2b6',
			borderRadius: '3px'
		}
	});

Share this