將jQuery Tipsy與元素的左側邊緣對齊

我正在使用jQuery Tipsy Plugin在我的項目中創建工具提示。工具提示自動以元素爲中心，如插件頁面演示中所示，但我希望它與元素左側對齊，有沒有人知道這樣做的方法？插件在顯示時會自動設置工具提示的絕對位置，我嘗試改變此功能，但沒有運氣。將jQuery Tipsy與元素的左側邊緣對齊

更新1：我非常清楚的文檔和gravity選項，我期待居中提示箭頭的左邊緣的它的相應元素。

更新2：這裏是了，我怎麼想的工具提示中放置一個模擬： Left: Current, Right: Intended

來源

2012-05-30 Ryan Brodie

找到了解決方案，我在編輯錯誤的函數。它轉的外面有專門爲「NW/SW」比重，更新JS另一個功能：

  if (gravity.length == 2) { 
       if (gravity.charAt(1) == 'w') { 
        tp.left = pos.left - 5; 
       } else { 
        tp.left = pos.left + pos.width/2 - actualWidth + 15; 
       } 
      }

我要這叉上的Git櫃面等的需要此功能。

來源

2012-05-30 20:44:34

+1感謝您爲可能有相同問題的其他人發佈您的解決方案。 – lucuma

感謝您的回答，我最初對我溝通不暢表示歉意。 –

你應該能夠基於重力選項來設置位置：

$('#foo').tipsy({gravity: 'e'}); // these are coordinates: // nw | n | ne | w | e | sw | s | se

有關插件選項的信息可以在此頁面找到。有關更多信息或其他配置選項，請參閱gravities一節。

http://onehackoranother.com/projects/jquery/tipsy/#

來源

2012-05-30 18:37:04 lucuma

對不起有人發佈了這個確切的答案，我評論解釋了爲什麼它是錯的，他們必須刪除它。道歉，謝謝你的回答，我很瞭解這些文檔，但是我將工具提示的提示與元素的**左邊緣**對齊，而不是中心。 –

@RyanBrodie我很困惑，你可以發佈你正在尋找的屏幕截圖.. – lucuma

樣機添加:) –

展望源（在第43行），

我發現這一點，

case 'n': 
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width/2 - actualWidth/2};

我猜改變left應該做的伎倆。

來源

2012-05-30 20:23:38 Jashwant

我認爲這就是OP的要求是什麼，應該設置。 – lucuma

'這個插件在顯示時會自動設置工具提示的絕對位置，我試過改變這個功能，但沒有運氣。「是的，我正在尋找要修改的功能嗎？ –

'如果你有源代碼，東西如何自動設置'？順便說一下，你有沒有嘗試過設置'left：0'？ – Jashwant

謝謝@Ryan的回答，這正是我一直在尋找的。我進一步瞭解了你的代碼並提供了更多的功能。

我加了2個新選項，以醉意，使其執行以下操作：

在sw/nw，您可以使用edgeAlignWest: 'right'或edgeAlignWest: 'center'
在se/ne，您可以使用edgeAlignEast: 'left'或edgeAlignEast: 'center'

要做到這一點的新代碼是

// line 61, tipsy version 1.0.0a 
if (gravity.length == 2) { 
    if (gravity.charAt(1) == 'e') { 
     tp.left = (this.options.edgeAlignEast == 'right') ? (pos.left + pos.width - actualWidth + 15) : (pos.left + pos.width/2 - actualWidth + 15); 
    }else if (gravity.charAt(1) == 'w') { 
     tp.left = (this.options.edgeAlignWest == 'left') ? (pos.left - 5) : (pos.left + pos.width/2 - 15); 
    } else { 
     tp.left = pos.left + pos.width/2 - actualWidth + 15; 
    } 
} 

//... 
// line 191, tipsy version 1.0.0a 
$.fn.tipsy.defaults = { 
    edgeAlignEast: 'center', // <-- new option, default to 'center', you can also use 'right' 
    edgeAlignWest: 'center', // <-- new option, default to 'center', you can also use 'left' 
    className: null, 
    delayIn: 0, 
    delayOut: 0, 
    fade: false, 
    fallback: '', 
    gravity: 'n', 
    html: false, 
    live: false, 
    offset: 0, 
    opacity: 0.8, 
    title: 'title', 
    trigger: 'hover' 
};

來源

2016-07-08 14:47:18 ghiscoding

很高興看到您保持項目更新 –

將jQuery Tipsy與元素的左側邊緣對齊

回答

相關問題